DOM之节点操作总结(附实例、图解)

目录

  1. 获取元素的两种方式
  2. 节点的概述
  3. 节点层级
    3.1 父级节点
    3.2 父子节点
    3.3 兄弟节点
  4. 创建节点
  5. 删除节点
  6. 复制节点(克隆节点)
  7. 三种创建元素的区别

正文

1. 获取元素的两种方式

(1)利用DOM提供的方法获取元素

  • document.getElementById()
  • document.getElementsByTagName()
  • document.querSelector等
  • 逻辑性不强、繁琐

(2)利用节点层级关系获取元素

  • 利用父子兄弟节点关系获取元素
  • 逻辑性强,但兼容性差

2. 节点的概述

在这里插入图片描述
一般的,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性

  • 元素节点 nodeType为1
  • 属性节点nodeType为2
  • 文本节点nodeType为3(文本节点包含文字、空格、换行等)

3. 节点层级

3.1 父级节点

利用DOM树可以把节点划分为不同的层级关系,常见的是父子兄层级关系

node.parentNode

  • parentNode属性可返回某节点的父节点,注意是最近的一个父节点
  • 如果指定的节点没有父节点则返回null

3.2 子节点

parentNode.childNodes(标准)

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

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

如果想到获得里面的元素节点,则需要专门处理,所以我们一般不提倡使用childNodes

var ul = document.querySelector('ul');
for(var i = 0; i < ul.childNodes.lenth; i++) {
		if(ul.childNodes[i].nodeType == 1) {
		//ul.childNodes[i] 是元素节点
		console.log(ul.childNodes[i]);
		}
	}

重点掌握

parentNodes.children(非标准)

parentNodes.children是一个只读属性,返回所有的子元素节点,它只返回子元素节点,其余节点不返回(重点掌握)

虽然children是一个非标准,但是已经得到了各个浏览器的支持,因此放心使用

在这里插入图片描述

parentNode.firstChild

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

parentNode.lastChild

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

parentNode.firstElementChild

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

parentNode.lastElementChild

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

注意:后面两个方法有兼容性问题,IE9以上才支持

// 1.firstChild 第一个子节点 不管是文本节点还是元素节点
console.log(ol.firstChild);
console.log(ol.lastChild);
    
// 2.firstelementChild 返回第一个元素节点
console.log(ol.firstElementChild);
console.log(ol.lastElementChild);

实际开发的写法 既没有兼容性问题还能返回第一个子元素

console.log(ol.children[0]);  
console.log(ol.children[ol.children.length-1]);

3.3 兄弟节点

所有节点

node.nextSibling

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

node.previousSibling

previousSiblin返回当前元素的上一个兄弟节点,找不到则返回null,同样,也是包括所有节点

特指元素节点

node.nextElementSibling

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

node.previousElementSibling

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

注意:这两个方法有兼容性问题,IE9以上才支持

解决兼容性问题:自己封装一个兼容性函数

在这里插入图片描述

4. 创建节点

document.createElement(‘tagName’);

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

var li = document.createElement('li');

5. 添加节点

node.appendChild(child);

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

node.insertBefore(child,指定元素)

// 2.添加节点 node.appendChild(child)  node 父级  child子级
// 后面追加元素,类似数组中的push
var ul = document.querySelector('ul');
ul.appendChild(li);

// 3.添加节点  node.insertBefore(child,指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili,ul.children[0]);

6. 删除节点

node.removeChild(child)

node.removeChild() 方法从DOM中删除一个子节点,返回删除的节点``

// 1.获取元素
var ul = document.querySelector('ul');
// 2.删除元素  node.removeChild(child);
ul.removeChild(ul.children[0]);

**阻止链接跳转需要添加 javascript:void(0); 或者javascript:;
**

<a href="javascript:void(0);"></a>
<a href="javascript:;"></a>

7. 复制节点(克隆节点)

node.cloneNode()

node.cloneNode() 方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点

注意:

  • 如果括号参数为空或者为false,则是浅拷贝,即只是克隆复制节点本身,不克隆里面的子节点

  • 如果括号参数为true,则是深度拷贝,会复制节点本身以及里面所有的子节点

node.cloneNode(); //浅拷贝,不复制内容,只复制标签
 node.cloneNode(true); //深拷贝,复制内容、复制标签

8. 三种创建元素的区别

  • document.write()
  • element.innerHTML
  • document.createElement()

区别

document.write是直接将内容写在页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘

例:

var btn = document.querySelector('button');
    btn.onclick = function() {
        document.write('<div>臭猪</div>');
    } 

点击前:

在这里插入图片描述

点击后:

在这里插入图片描述
页面重写了!!

  • innerHTML是将内容写入某个DOM节点,不会导致页面全部重绘
  • innerHTML创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂
  • createElement() 创建多个元素效率稍低一点点,但是结构更清晰

总结:不同浏览器,innerHTML效率要比creatElement高

例;

var inner = document.querySelector('.inner');
var arr = [];
    for(var i=0;i<=100;i++) {
        arr.push('<a href="#">百度</a>');
    }
inner.innerHTML = arr.join('');
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页