什么是 DOM?

DOM就是文档对象模型，一个网页就可以看作一个文档

DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合；它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。

获取元素的几种方式

<p id="p1" class="p2">Hello World!</p>

//获取p元素的几种方式
document.getElementById("p1") ：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个；

document.getElementsByClassName("p2") ：根据类名查找元素，多个类名用空格分隔,返回一个数组

document.getElementsByTagName("p") ：根据标签查找元素， * 表示查询所有标签，返回一个 HTMLCollection 。

document.getElementsByName ：根据元素的name属性查找，返回一个 NodeList 。

document.querySelector("#p1") ：括号里面是#id名或者.class名；返回单个Node，IE8+(含），如果匹配到多个结果，只返回第一个。

document.querySelectorAll() ：返回一个 NodeList ，IE8+(含）。

这就是打印出来的元素
在这里插入图片描述

操作DOM

创建元素

创建一个节点，并把它添加到页面中

//创建一个标签
let div1 = document.createElement('div')
//创建一个文本节点
text1 = document.createTextNode('你好')
//把文本插入标签节点
div1.appendChild(txet1)

你创建的标签默认处于JS线程中
你必须把它插到head或者body里面，它才会生效

document.body.appendChild('div1')

或者插入已在页面中的元素

已在页面中的元素.appendChild('div1')

同一个标签不能同时插入到两个页面标签里，如果想同时存在，需要克隆
参数为true时是深拷贝，会把div1里的所有后代全都复制一遍
不写默认是浅拷贝，只复制此节点

let div2 = div1.cloneNode(true)

删除

删除有两种方法
新方法

父元素.childChild(子元素)

新方法

要移除的元素.remove()

改

修改属性

写标准属性
改class：div.className ='red blue'（全覆盖）
改class：div.classList.add（'red'）
改style：div.style ='width：100px；color：blue；
改style的一部分：div.style.width ='200px'
大小写：div.style.backgroundColor ='white'
改data-*属性：div.dataset.x ="dong"

读标准属性
div.classList/a.href 
div.getAttribute('class')/a.getAttribute（'href'）
两种方法都可以，但值可能稍微有些不同

改内容

改文本内容
	div.innerText ='xxx'
	div.textContent='xxx'
两者几乎没有区别

改HTML内容
	div.innerHTML='<strong>重要内容</strong>'
改标签
	div.innerHTML="//先清空
	div.appendChild(div2)//再加内容

标签.childNodes.length 是计算标签的子元素的（回车也算）
标签.children.length 是计算子元素（不含回车）

查

查爸爸
node.parentNode 或者node.parentElement
查爷爷
node.parentNode.parentNode
查子代
node.childNodes或者node.children
查兄弟姐妹
node.parentNode.childNodes还要排除自己
node.parentNode.children还有排除自己

遍历一个div里所有的元素

travel = (node, fn) =>{
    
    
	fn(node)
	if(node. children){
    
    
		for(let i-0; iknode. children. length;i++){
    
    
			travel(node. children[i], fn)
		}
	}
}
travel(div1, (node) => console.log(node))

						学习的时光总是短暂，又到了时候说拜拜
							欢迎关注公众号  oldCode
								获取新鲜教程资料

在这里插入图片描述

02JavaScript的DOM操作

什么是 DOM?

获取元素的几种方式

操作DOM

创建元素

删除

改

查

猜你喜欢