节点
1. // 测试代码 2. <div id="box1"> 3. <div id="box2"></div> 4. <div id="box3"></div> 5. <div id="box4"></div> 6. </div>
- 获取父节点 ○ parentNode 和 parentElement 是一样的，但 parentNode 是W3C标准，parentElement 只在IE中可用。 ○ 当父节点的 nodeType 不是1，即不是element节点的话，它的 parentElement 就会是 null。 ○ 一般情况 parentNode 可以取代 parentElement 的所有功能。 ○ parentElement 匹配的是 parent 为 element 的情况，而 parentNode 匹配的则是 parent 为 node 的情况。element 是包含在 node 里的，它的 nodeType 是1。
var box1 = box3.parentNode; var box1 = box3.parentElement;
- 获取下一个兄弟节点 ○ nextSibling 的调用者是节点，IE678 中指下一个元素节点(标签)，在 火狐 | 谷歌 IE9+以后都指的是下一个节点(包括空文档和换行节点)。 ○ nextElementsibling 在火狐谷歌IE9都指的是下一个元素节点。 ○ 总结：在E678中用 nextSibling ,在 火狐 | 谷歌 IE9+以后用 nextElementSibling。
// 下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling var box4 = box3.nextElementSibling || box3.nextSibling;
- 获取上一个兄弟节点 ○ previousSibling 的凋用者是节点，IE678 中指前一个元素节点(标签)，在 火狐 | 谷歌 IE9+以后都指的是前一个节点(包括空文档和换行节点)。 ○ previousElementSibling 在 火狐 | 谷歌 IE9都指的是前一个元素节点。 ○ 总结：在IE678中用 previousSibling 在 火狐 | 谷歌 IE9+以后用 previousElementSibling。
// 下一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling var box2 = box3.previousElementSibling || box3.previousSibling;
- 获得单个子节点(也就是父节点中的第一个节点或者最后一个节点) ○ firstChild 的调用者是父节点，IE678 中指第一个子元素节点(标签)，在 火 狐 | 谷歌 IE9+以后都指的是第一个节点(包括空文档和换行节点)。 ○ firstElementChild 在 火狐 | 谷歌 IE9都指的第一个元素节点。 ○ lastElementChild 与 lastChild 同理。
// 第一个子节点 = 父节点.firstElementChild || 父节点.firstChild
// 获得父节点里面的首个子节点 var box2 = box1.firstElementChild || box1.firstChild;
// 获得父节点里面的最后个子节点 var box4 = box1.lastElementChild || box1.lastChild;
- 获得所有子节点(也就是父节点中的所有节点) ○ childNodes 它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性文本节点 (他还是W3C的亲儿子)。 ○ 火狐 | 谷歌 等高本版会把 换行 也看做是子节点。 ○ ○ ○ 文章下面有 nodeType / nodeName / nodeValue 的使用介绍。
// 子节点数组 = 父节点.childNodes var childs = box1.childNodes;
- JS中 childNodes 与 children 的区别 ○ children 是非标准属性，它返回指定元素的子元素集合。 ○ 但它只返回HTML节点，甚至不返回文本节点，虽然不是标准的DOM属性，但它和 innerHTML 方法一样，得到了几乎所有浏览器的支持。 ○ children 在E6/7/8中包含注释节点。 ○ 在IE678中，注释节点不要写在里面。 ○ children 用的最多。
// 子节点数组 = 父节点.children var childs = box1.children;
- 增删节点 ○ append()、appendChild() 和 innerHTML 的区别
// 新建节点 var box5 = document.createElement('div');
// 插入节点 - 父节点的最后面插入 box1.appendChild(box5);
// 插入节点 - 父节点的最前面插入 box1.insertBefore(box5);
// 删除节点 box1.removeChild(box5);
// 不知道父级节点的情况可以这么删除自己 box5.parentNode.removeChild(box5);
// 复制节点 - true: 表示深复制(复制节点以及其所有的子节点) // 复制节点 - false: 表示浅复制(复制节点本身，不复制子节点) box5.cloneNode(true);
节点属性
- 属性，赋值获取两种方式 ○ 元素节点.属性 || 元素节点[属性]
var box3 = document.getElementById('box3'); // 赋值id box3.id = 值; // 获取id console.log(box3.id); console.log(box3['id']);
○ 元素节点.方法();
// 获取id console.log(box3.getAttribute('id')); // 赋值id box3.setAttribute('id','new_id'); // 移除id box3.removeAttribute('id');
上面两种方式都可以，区别就是第一种如果随意添加一个值不会显示在标签上，但是能获取的到。第二种则是既能显示在标签上又能获取的到。但是两种赋值方式不可以使用对方的取值方式，也就是你用哪种方式添加的属性，还得用哪种方式的取值方式才能得到属性值，否则会使 null 或者 undefined。 例如：
// 这种在 box3 标签上是看不到的，但是可以使用这个属性。 box3.dzm = 'dzm'; // 这种在 box3 标签上是看的到，同时也可以使用这个属性。 box3.setAttribute('dzm','dzm');
- value / innerHTML / innerText / textContent 的区别 ○ 老版本的火狐不支持 innerText，IE678不支持 textContent。 ○ p不能嵌套p，h1不能嵌套h1，a连接内部不能嵌套a连接。
// value: 标签的value属性。 console.log(document.getElementById('box1').value)
// innerHTML: 获取双闭合标签里面的内容(识别标签)。 console.log(document.getElementById('box1').innerHTML) document.getElementById('box1').innerHTML = "
dzm
"; // 输出 dzm
// innerText: 获取双闭合标签里面的内容(不识别标签)。 console.log(document.getElementById('box1').innerText) document.getElementById('box1').innerText = "
dzm
"; // 输出
dzm
- nodeType / nodeName / nodeValue ○ nodeType == 1 时才是元素节点(标签)。 ○ nodeType == 1 表示是元素节点，元素就是标签。 ○ nodeType == 2 表示是属性节点。 ○ nodeType == 3 表示是文本节点。
// 测试代码
dzm
// 元素节点 var ele = document.getElementById('box'); // 属性节点 var att = ele.getAttributeNode('id'); // 文本节点 var txt = ele.firstChild;; // 正常输出 console.log(ele); // <div id="box">dzm</div> console.log(att); // id="box" console.log(txt); // dzm // nodeType console.log(ele.nodeType); // 1 console.log(att.nodeType); // 2 console.log(txt.nodeType); // 3 // nodeName console.log(ele.nodeName); // DIV console.log(att.nodeName); // id console.log(txt.nodeName); // #text // nodeValue console.log(ele.nodeValue); // null console.log(att.nodeValue); // box console.log(txt.nodeValue); // dzm
