JavaScript之DOM(二)(节点操作）

var ul = document.querySelector(‘ul’);

console.log( ‘ul的父级节点是：’);

console.log(ul.parentNode);

打印结果为：

2、子节点

parentNode.childNodes//（标准）

parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。

注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。

parentNode.children//（非标准）

parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回 。

parentNode.firstChild

firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点

parentNode.lastChild

lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点

parentNode.firstElementChild

firstElementChild 返回第一个子元素节点，找不到则返回null。

parentNode.lastElementChild

lastElementChild返回最后一个子元素节点，找不到则返回null。

示例如下;

var ul = document.querySelector(‘ul’);

console.log( ‘ul的所有子节点是：’);

console.log(ul.childNodes);

console.log( ‘ul的所有子元素节点是：’);

console.log(ul.children);

console.log( ‘ul的第一个子节点是：’);

console.log(ul.firstChild);

console.log( ‘ul的第一个子元素节点是：’);

console.log(ul.firstElementChild);

console.log( ‘ul的最后一个子节点是：’);

console.log(ul.lastChild);

console.log( ‘ul的最后一个子元素节点是：’);

console.log(ul.lastElementChild);

打印结果为：

3、 兄弟节点

node.nextSibling

nextSibling 返回当前元素的下一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。

node.previousSibling

previousSibling 返回当前元素上一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。

node.nextElementSibling

nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null。

node.previousElementSibling

previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null。

例如：

var ul = document.querySelector(‘ul’);

console.log( ‘ul的下一个相邻兄弟节点是：’);

console.log( ul.nextSibling);

console.log( ‘ul的前一个相邻兄弟节点是：’);

console.log(ul.previousSibling);

console.log( ‘ul的下一个相邻兄弟元素节点是：’);

console.log(ul.nextElementSibling);

console.log( ‘ul的前一个相邻兄弟元素节点是：’);

console.log(ul.previousElementSibling);

打印结果为：

3、创建节点

---

document.createElement(‘tagName’)

document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

例如：

var ul = document.querySelector(‘ul’);

var li = document.createElement(“li”);

li.innerHTML = ‘你好’;

console.log(li);

4、添加节点

---

node.appendChild(child)

node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的 after 伪元素。

例如：将上面创建的节点添加到ul的最后面。

var ul = document.querySelector(‘ul’);

var li = document.createElement(“li”);

li.innerHTML = ‘你好’;

ul.appendChild(li,ul.children[0]);

打印结果为：

node.insertBefore(child, 指定元素)

node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。

例如：将上面创建的节点添加到ul的最前面。

var ul = document.querySelector(‘ul’);

var li = document.createElement(“li”);

li.innerHTML = ‘你好’;

ul.insertBefore(li,ul.children[0]);

最后

喜欢的话别忘了关注、点赞哦~