DOM —> Document Object Model
概念：
DOM是针对XML的扩展，s’s(API)DOM把整个文档映射成一个树状结构，它里面的所有的东西都是一个结点。比如说，一个div元素对象，就称为一个元素节点。而节点是这些对象的父级。节点至少拥有==nodeType、nodeName==和==nodeValue==这三个基本属性。节点类型不同，这三个属性的值也不相同
[x] 元素节点 Node.ELEMENT_NODE(1)
[x] 属性节点 Node.ATTRIBUTE_NODE(2)
[x] 文本节点 Node.TEXT_NODE(3)
[ ] CDATA节点 Node.CDATA_SECTION_NODE(4)
[ ] 实体引用名称节点 Node.ENTRY_REFERENCE_NODE(5)
[ ] 实体名称节点 Node.ENTITY_NODE(6)
[ ] 处理指令节点 Node.PROCESSING_INSTRUCTION_NODE(7)
[x] 注释节点 Node.COMMENT_NODE(8)
[x] 文档节点 Node.DOCUMENT_NODE(9)
[ ] 文档类型节点 Node.DOCUMENT_TYPE_NODE(10)
[ ] 文档片段节点 Node.DOCUMENT_FRAGMENT_NODE(11)
[ ] DTD声明节点 Node.NOTATION_NODE(12)
-记住 1 2 3 8 9
ele.childNodes 获取元素节点第一层所有的子节点
ele.childNodes 可以获取到一个元素节点的第一层所有的子节点
var box = document.querySelector(
'.box');
console.log(box.childNodes.length); //
7
onsole.log(box.childNodes);
console.log(box.childNodes[
3].nodeType); //
8
console.log(box.childNodes[
3].nodeName); //
'#comment'
console.log(box.childNodes[
3].nodeValue); //
' 这是注释 '
console.log(box.childNodes[
0].nodeType); //
3
console.log(box.childNodes[
0].nodeName); //
'#text'
console.log(box.childNodes[
0].nodeValue); //
''
ele.parentNode 可以获取到ele的父节点
ele.offsetParent 可以获取到ele的定位的父节点
var child = document.querySelector(
'.child');
console.log(child.parentNode);
console.log(child.offsetParent)
ele.children 可以获取到 ele 的第一层的所有的元素子节点 并且是 动态获取
兄弟节点
ele.previousElementSibling 获取到ele的上一个元素兄弟节点ele.nextElementSibling 获取到ele的下一个元素兄弟节点
前后子节点
ele.firstElementChild 获取到ele的第一个子元素子节点ele.lastElementChild 获取到ele的最后一个元素子节点
10.20;
document.createElement（’标签的名字’） 创建一个DOM元素
var link = document.createElement('a');
console.log(link)
//给创建的元素进行属性操作
link.href = 'https://www.google.com';
link.href = 'https://www.google.com';
parent.appendChild(ele) 把 ele 这个元素对象插入到 parent 这个父容器的最后
parent.insertBefore(newEle, target); 把 newEle 这个元素放到父容器为 parent 的 target（可以是任意一个元素） 元素的 前面
insertBefore 和 appendChild 的返回值就是被插入的那个元素
翻译（insert–插入；append–追加添加） -剪切节点
-删除节点
parent.removeChild(ele); 删除 parent 父容器下面的 ele 元素 var btn = document.querySelector(‘.btn’);
var h1 = btn.nextElementSibling.firstElementChild;
var h1Temp = null;
h1.onclick = function (){
alert(this.innerHTML);
};
btn.onclick = function (){
// 返回结果是被删除的元素
console.log(h1Temp = this.nextElementSibling.removeChild(h1));
setInterval(fn.bind(this), 3000);
};
function fn(){
this.nextElementSibling.appendChild(h1Temp);
}
ele.cloneNode([deep]); 克隆 ele 这个节点，如果传了 deep参数为 true 那么就是深克隆
替换节点
parent.replaceChild(new, old) 把 parent 下的 old 节点替换成 new 节点 （剪切操作)
10.23
表格
通过 table.tHead 可以获取到表格头通过 table.tFoot 可以获取到表格脚通过 tbody.rows[index] 获取到某个tbody里面的index行table.tBodies[0].rows // 第一个tBody里面的所有的 行table.tBodies[0].rows[0] // 第一个tBody里面的第一行通过 row.cells[index] 获取到某一行里面的第index个单元格table.tBodies[0].rows[0].cells 获取到 rows[0]的所有的单元格table.tBodies[0].rows[0].cells[1] 获取到rows[0]的所有的单元格中的第二个
var table = document.getElementById(
'table');
console.log(table.tHead);
console.log(table.tFoot);
console.log(table.tBodies);
console.log(table.tBodies[
0].rows[
0].cells[
1]);
快速的获取body document.body 快速的获取html document.documentElement 快速的获取title doucment.title (可读可写)
自定义属性
data-属性名=”value” 代表html5的自定义属性在JS中 使用 ele.dataset 可以获取到所有自定义属性的集合如果data-后面是一个驼峰命名的，那么会把所有的字母都变成小写。如果想使用驼峰命名，比如 divEle，需要写成 data-div-ele；
<div data-file-id=
'0'></div>;
获取 他的自定义属性
ele.dataset.fileId；
attributes
通过 ele.attributes 可以拿到ele元素属性节点的集合
