DOM
- JavaScript由 ECMAScript，DOM，BOM 组成。
- DOM：Document Object Model 文档对象模型。
- 加载HTML页面时，web浏览器生成一个树状结构，用来表示页面内部结构，称之为DOM树。DOM树由节点组成。
子节点
- 父节点.children：返回子元素的集合，是HTMLCollection对象。非标准属性。
- 父节点.childNodes：返回子节点的集合，是NodeList对象。标准属性。
// 父节点.children：返回子元素的集合，是HTMLCollection对象。非标准属性。
// 父节点.childNodes：返回子节点的集合，是NodeList对象。标准属性。
var box = document.getElementById('box');
console.log(box.children); // HTMLCollection(2) [p, span]
console.log(box.childNodes); // NodeList(5) [text, p, text, span, text]
节点的属性
-
nodeType：节点类型。标签：1 属性：2 文本：3
-
nodeName：节点的名字（标签名）
-
nodeValue：文本节点的内容
父节点
- 元素.parentNode：父节点
- 元素.offsetParent：元素的偏移参考父节点，距离当前元素最近的已经定位的父级元素，如果都没定位就是body。
// 元素.parentNode：父节点
// 元素.offsetParent：元素的偏移参考父节点，距离当前元素最近的已经定位的父级元素，如果都没定位就是body。
var box3 = document.getElementById('box3');
console.log(box3.parentNode);
console.log(box3.offsetParent);
其他节点关系
- 父节点.firstChild：第一个子元素，低版本IE获取第一个子元素，标准浏览器获取的换行，文本。
- 父元素.firstElementChild：第一个子元素，可以解决换行问题，标准浏览器使用
- 父节点.lastChild：最后一个子元素，低版本IE获取最后一个子元素，标准浏览器获取的换行，文本。
- 父元素.lastElementChild：最后一个子元素，可以解决换行问题，标准浏览器使用
- nextSibling：下一个兄弟元素，低版本IE
- nextElementSibling：下一个兄弟元素，标准浏览器
- previousSibling：上一个兄弟元素，低版本IE
- previousElementSibling：上一个兄弟元素，标准浏览器
var first = list.firstElementChild || list.firstChild;
var last = list.lastElementChild || list.lastChild;
var next = li3.nextElementSibling || li3.nextSibling;
var prev = li3.previousElementSibling || li3.previousSibling;
操作节点
- document.createElement(标签名)：创建节点
- document.createTextNode()：创建文本节点
- 父元素.appendChild(子节点)：拼接子节点，在父元素的尾部添加子节点
- 父节点.insertBefore(要插入的新节点, 参考节点)：把节点插入到目标节点前
- 父节点.removeChild(子节点)：移除子节点
- 节点.remove()：把节点移除
- 父节点.replaceChild(新节点, 旧节点)：使用新节点替换旧节点
- 节点.cloneNode(布尔值)：复制节点，true表示复制节点和内容，false表示只复制节点。
// document.createElement(标签名)：创建节点
var list = document.getElementById('list');
var li3 = document.getElementById('li3');
var newli = document.createElement('li');
newli.innerHTML = 'xixi';
console.log(newli);
// // document.createTextNode()：创建文本节点
// var t = document.createTextNode('haha');
// console.log(t);
// // 父元素.appendChild(子节点)：拼接子节点，在父元素的尾部添加子节点
// newli.appendChild(t);
// console.log(newli);
// list.appendChild(newli);
// 父节点.insertBefore(要插入的新节点, 参考节点)：把节点插入到目标节点前
// list.insertBefore(newli, li3);
// 父节点.removeChild(子节点)：移除子节点
// list.removeChild(li3);
// 节点.remove()：把节点移除
// list.remove();
// 父节点.replaceChild(新节点, 旧节点)：使用新节点替换旧节点
// list.replaceChild(newli, li3);
// 节点.cloneNode(布尔值)：复制节点，true表示复制节点和内容，false表示只复制节点。
list.appendChild(li3.cloneNode(true));
list.appendChild(li3.cloneNode(false));
table
var tb = document.getElementsByTagName('table')[0];
console.log(tb);
console.log(tb.tHead);
console.log(tb.tBodies[0]);
console.log(tb.tFoot);
console.log(tb.tBodies[0].rows); // HTMLCollection(3) [tr, tr, tr]
console.log(tb.tBodies[0].rows.length); // 3
console.log(tb.tBodies[0].rows[0]);
console.log(tb.tBodies[0].rows[0].cells);
console.log(tb.tBodies[0].rows[0].cells.length);
console.log(tb.tBodies[0].rows[0].cells[0]);
tb.tBodies[0].rows[0].cells[0].style.background = 'red';