js中常见的DOM操作_js操作dom的方法-CSDN博客

本文链接：https://blog.csdn.net/Wen_Tao98/article/details/112840475

DOM

DOM是网页中用来表示文档中对象的标准模型，他是由节点和对象组成的结构集合。在浏览器解析HTML标签时，会构建一个DOM树结构，把html结构化成js可以识别的树模型。
树模型构成的层级结构，可以很容易的表明家族成员之间的关系，把复杂的关系简明地表示出来
由此呢js也提供了一些dom的操作

一、dom元素获取

document.getElementById(id的值) 通过id来获取元素的对象，返回值是一个对象

 // 通过id属性获取
  let box=document.getElementById('box')
  console.log(box)

document.getElementsByName(name) 通过name属性来获取对象的,返回值是一个数组，与getElementById()方法类似，但他是查询的name元素，而不是id属性。

<html>
	<head>
	<script type="text/javascript">
 	 var myinput=document.getElementsByName("myInput");
 	 console.log(myinput)
	</script>
	</head>
<body>
	<input name="myInput" type="text" size="20" /><br />
	<input name="myInput" type="text" size="20" /><br />
	<input name="myInput" type="text" size="20" /><br />
</body>
</html>

document.getElementsByTagName() 通过标签来获取元素的对象, 返回值是一个数组

// 通过name获取属性
  let input=document.getElementsByTagName('input')
  console.log(input)

document.getElementsByClassName() 通过class类名来获取的对象,返回值是一个数组

// 通过class属性获取
  let ul1=document.getElementsByClassName('ul1')[1]
  console.log(ul1)

document.querySelector() css选择符模式，返回与该模式匹配的第一个元素，结果为一个元素；如果没找到匹配的元素，则返回null
```
// 通过类选择器获取对应的节点，能获取到第一个querySelector() 
  let ul2=document.querySelector('.ul')
  // console.log(ul2)
```

document.querySelectorAll() css选择符模式，返回与该模式匹配的所有元素，结果为一个类数组

// 通过类选择器获取对应的节点，能获取到此类的节点querySelectorAll()
  let ul2=document.querySelectorAll('.ul')
  // console.log(ul2)

二、dom简单操作

创建：新的标签(元素节点) = document.createElement("标签名")
2. 删除：父节点.removeChild(子节点);
3. 插入：insertBefore(新插入的节点，参照物节点) 往某个节点的前面插入一个新的节点
4. 追加：appendChild(新的节点的名) 当前对象追加一个子节点

	<body>
		<ul class="ul2">
	      <li>11</li>
	      <li>22</li>
	      <li>33</li>
	    </ul>
    </body>
    
    <script>
		// 创建一个节点
	  	let li=document.createElement("li")
	  	// 给节点添加数据
	  	li.innerText="我的天啊"
	
	 	// 尾部追加
	 	box.appendChild(li)

		//插入节点
  		ul2.insertBefore(li,ul2.firstElementChild)
	
	  	// 删除节点
	 	 let ul2=document.querySelector('.ul2')
 	 	 box.removeChild(ul2)
 	 </script>

DOM相关面试题

问题1、dom是哪种基本的数据结构？ 
树结构
问题2、Dom操作的常用API有哪些？ 
①获取DOM节点，以及节点的property和Attribute 
②获取父节点，获取子节点  childNodes/ parentNode
③新增节点，删除节点 
问题3、Dom节点的Attribute和Property有和区别？ 
①property只是一个JS对象的属性的修改 
②Attribute是对html标签属性的修改
问题4、DOM性能优化。
将频繁的操作改为一次性操作，通过创建文档碎片，最后一次性加入文档碎片。