DOM基础操作

javaScript的组成

1. js语法：ECMAScript
2. DOM：Document Object Model（文本对象模型），可以操作html+css
3. BOM：Browser Object Model（浏览器对象模型）

DOM树结构图

DOM节点类型

节点的属性

1. nodeType ____区分节点的类型
2. nodeName ____获取节点的名称
3. nodeValue ____获取注释节点和文本节点的内容
4. attributes ____获取元素节点的属性节点结合

基于节点树的查询

1. childNodes ____查询所有的子节点们
2. firstChild ____查询第一子节点
3. lastChild ____查询最后一个子节点
4. parentNode ____查询父节点
5. nextSibling ____查询下面的相邻的兄弟节点
6. previousSibling ____查询寻上面的相邻的兄弟节点

基于元素节点树的查询

7. children ____查询所有的元素子节点们
8. firstElementChild ____查询第一个元素节点
9. lastElementChild ____查询最后一个元素节点
10. parentElement ____查询符节点
11. nextElementSibling ____查询下面的相邻的兄弟元素节点
12. previousElementSibling ____查询上面的相邻的元素节点

var oBox = document.getElementById('box');  //通过id名字获取节点
console.log(oBox.previousElementSibling);//获取下一个兄弟元素节点
console.log(document.getElementById('a').parentNode)//获取父节点

获取元素的方法

1. document.getElementById()____通过id名称获取节点
2. document.getElementByClassName()____通过class名字获取节点，获取的是一个数组
3. document.getElementByTagName()____通过标签名字获取节点，获取到的一个数组
4. document.querySelectorAll()____通过复合选择器获取节点，获取的是一个数组
5. document.querySelector()____通过复合选择器获取复合条件的第一个节点
6. document.getElementsByname()____通过name属性获取节点，获取的是一个数组
7. document.head____获取head标签
8. document.body____获取body标签
9. document.documentElement____获取html标签

get系列获取元素的方式是动态获取，动态获取指的是：在获取节点之后还可能检测到符合条件的节点，并放置到集合中
query系列获取元素的方式是静态获取，静态获取指的是：在获取节点之后无法检测出符合条件的节点

//var oBox = document.getElementById('box');

    var oBox = document.getElementsByClassName('box')[1]

    var aBox = document.getElementsByTagName('div');

    var aLi = document.querySelectorAll('.box ul li');

    var oLi = document.querySelector('.box ul li');

    var aInput = document.getElementsByName('a')
    console.log(aInput);

    console.log(document.head);
    console.log(document.body);
    console.log(document.documentElement);
    console.log(document);

节点的创建

1. document.createElement()___创建元素节点
2. document.createTextNode()____创建文本节点
3. document.createCommert()____创建注释节点
4. document.createDocumentFragment()____创建文档片段节点

节点的添加（剪切操作）

1. parentNode.appendChild(子节点)____把子节点插入到父节点的最后面
2. parentNode.insertBefore(A,B)____把节点A添加到节点B之前

    var oH3 = document.getElementsByTagName('h3')[0];
    oBox.appendChild(oH3);//把oDiv插入到oBox的最后面

	var oComment = document.createComment('我是注释的内容')
    oBox.appendChild(oComment);

节点的替换（剪切操作）

parentNode.replaceChild(A,B)____用节点A替换节点B

节点的删除

parentNode.removeChild(子节点)

获取节点内容

1. innerText___可以设置节点的文本内容，也可以读取节点的内容，不可以解析标签
2. innerHTML____可以设置节点的文本内容，也可以读取节点的内容，也可以解析标签

var oH3 = document.querySelectorAll('h3');
// console.log(oH3[0].innerText);
//oH3[0].innerText = '<a>我是修改后文本节点的内容</a>';
oH3[0].innerHTML = '<a>我是修改后文本节点的内容</a>';

属性节点的方法

1. 元素节点.setAttribute(属性节点名，属性节点值)___设置指定的属性节点
2. 元素节点.getAttribute(属性节点名)___获取指定的属性节点名称的值
3. 元素节点.removeAttribute(属性节点名)___删除指定属性节点
4. 元素节点.hasChildNodes()___判断元素节点有没有子节点

var oBox = document.getElementById('box');
// console.log(oBox.children[0].attributes[0]);
// oBox.children[0].setAttribute('class','heaven')

//console.log(oBox.children[0].getAttribute('class'));
// oBox.children[0].removeAttribute('class')

console.log(oBox.hasChildNodes());