JS 学习笔记四(DOM)(节点)

节点

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');

• a 标签点击之后不做跳转
  // 方式一
  // 方式二
  

• 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