这篇文章上次修改于 2081 天前，可能其部分内容已经发生变化，如有疑问可询问作者。

js的三个组成部分：ECMAScript(核心)、DOM、BOM

   DOM 文档对象模型
   文档：HTML页面；文档对象：页面中元素；文档对象模型：为了能让程序去操作页面中的元素，定义的一个标准
   DOM将文档看做一棵树
 1、获取节点——每一个标签都是一个节点
   文档节点包括：子节点、父节点、兄弟节点

获取节点——每一个标签都是一个节点

   文档节点包括：子节点、父节点、兄弟节点

1、子节点：父节点.children 非标准属性 获取标签节点

             父节点.childNodes 标准属性 获取标签节点、文本，可以获取到折行
var oBox = document.getElementById('box');
console.log(oBox.children);//HTMLCollection 返回指定元素的子元素，找到第一级的所有的子元素
console.log(oBox.childNodes);// 找到第一级所有的子节点（元素节点、属性节点、文本节点）
       判断节点类型： 节点.nodeType   返回数字，元素节点element（节点类型1）、属性节点attr(2)、文本text(3)、注释节点comments(8)、文档节点document(9)
        console.log(oBox.nodeType);//1
       获取节点名称：节点.nodeName
        console.log(oBox.nodeName);//div
       获取文本节点的内容 节点.nodeValue  只有文本节点有这个属性，返回文本节点的内容
        console.log(oBox.nodeValue);//null

2、父节点：元素.parentNode 获取直接父元素

          元素.offsetParent 获取最近的定位父元素，如果没有定位父级，获取body
var oBox1 = document.getElementById('box1');
console.log(oBox1.parentNode);//父节点
console.log(oBox1.offsetParent);//

3、获取首位节点：父元素.firstChild 父元素的第一个子元素 标准浏览器中 有折行会获取到

                父元素.firstElementChild  只能在标准浏览器下使用，不会获取到折行
console.log(oBox.firstChild);//
console.log(oBox.firstElementChild);//第一个子 元素节点

4、获取尾部节点：父元素.lastChild

                父元素.lastElementChild
console.log(oBox.lastChild);//会获取到折行
console.log(oBox.lastElementChild);//最后一个子 元素节点
5、获取上一个兄弟节点
console.log(oBox1.previousSibling);//上 一个兄弟节点
console.log(oBox1.previousSibling.previousSibling);
console.log(oBox1.previousElementSibling);//上一个兄弟 元素节点
6、获取下一个兄弟节点
console.log(oBox1.nextSibling);//下一个兄弟节点
console.log(oBox1.nextElementSibling);//null 下一个兄弟 元素节点

/ 1、获取行间属性：元素.style.属性名 元素.属性

console.log(oBox.style.backgroundColor);//获取行间属性
console.log(oBox.id);//获取行间属性
oBox.name = 'asd'; //设置属性（set）
console.log(oBox.name);//获取属性 asd（get）

// 2、DOM 获取/设置属性的方法：
// 获取属性：元素.getAttribute('属性名称');
// 设置属性：元素.setAttribute('属性名称',"属性值");

  1、创建元素节点    document.createElement('标签名');
    var oP = document.createElement('p'); //创建一个p标签
    oP.innerHTML = '123';
    //  2、父元素的末尾追加一个节点——appendChild()
    oBox.appendChild(oP);
    //    3、某个元素之前插入节点——父元素.insertBefore(要插入的节点,参考节点)
    // oBox.insertBefore(oP, oBox1); //在oBox盒子内部，oBox1盒子之前插入p标签
    //    4、替换节点——父元素.replaceChild(要替换的节点,被替换的节点)
    // oBox.replaceChild(oP, oBox1); //将oBox盒子内部的，oBox盒子替换为p标签
    //    5、复制节点——要复制的元素.cloneNode(布尔) 默认值为false
    oBox.insertBefore(oP.cloneNode(true), oBox1); //复制一个p标签（含标签和内容），并将其追加到元素末尾
    // oBox.appendChild(oP.cloneNode(false)); //复制一个p标签（只有标签，没有内容），并将其追加到元素末尾
    //  6、删除节点——父元素.removeChild(要删除的节点)
    oBox.removeChild(oP); //删除oBox中的第一个oP节点（标签和内容）
    // oBox.remove(oP)
    oBox1.remove()

    var oBox = document.getElementById('box');
    var oBox1 = document.getElementById('box1');
    //1、创建文本节点——document.createTextNode('文字内容');
    var txt = document.createTextNode('abc');
    var txt2 = document.createTextNode('def');
    // 2、添加到元素节点中
    oBox1.appendChild(txt); //在box1盒子中添加元素节点
    oBox1.appendChild(txt2); //abcdef
    //获取box1盒子中文本节点的个数
    // console.log(oBox1.childNodes.length); //2个文本节点
    // console.log(oBox1.innerHTML);
    // console.log(oBox1.childNodes[0].nodeValue);
    // console.log(oBox1.childNodes[1].nodeValue)

3、合并同级的文本节点

   oBox1.normalize();
    console.log(oBox1.childNodes.length); //1
    console.log(oBox1.childNodes[0].nodeValue);

4、拆分文本节点——splitText(2)2表示字符的个数

    console.log(oBox1.childNodes[0].splitText(2)); //cdef
    console.log(oBox1.childNodes);

5、删除文本节点——deleteData(0,2) 删除 下标为0的位置开始的2个内容

    console.log(oBox1.childNodes[1].deleteData(0, 2)); //undefined
    console.log(oBox1.childNodes[1].nodeValue); //ef

6、插入文本——insertData(1,"yui") 第一个参数表示下标的位置，第二个参数指插入的文本

    oBox1.childNodes[0].insertData(1, "yui"); //ayuib
    console.log(oBox1.childNodes[0].nodeValue);

7、替换——replaceData(1,3,'123')第一个参数表示下标的位置，第二个参数指要替换几个字符，第三个参数指替换

  的文本内容
    oBox1.childNodes[0].replaceData(1, 3, '123');
    console.log(oBox1.childNodes[0].nodeValue); //a123b

8、截取字符串——substringData(1,3) 第一个参数表示下标的位置，第二个参数要截取的字符数

    var str = oBox1.childNodes[0].substringData(1, 3);
    console.log(str); //123
    console.log(oBox1.childNodes[0].nodeValue); //a123b

1、获取表格元素

    var tab = document.getElementById('table1');
    console.log(tab);
    console.log(tab.tHead); //获取元素thead
    console.log(tab.tFoot); //获取元素tfoot
    console.log(tab.tBodies[0]); //获取元素tbody
    console.log(tab.rows); //获取元素tr
    console.log(tab.tBodies[0].rows); //获取元素tr
    console.log(tab.tBodies[0].rows[0]); //获取元素tr
    console.log(tab.cells); //undefined
    console.log(tab.rows[0].cells); //获取元素td/th
    console.log(tab.rows[0].cells[0]); //获取元素td/th
    console.log(tab.rows[0].cells[0].innerHTML); //