JS操作DOM

72 阅读 0 评论 48 点赞

我是靠谱客的博主超级冰淇淋，最近开发中收集的这篇文章主要介绍JS操作DOM，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

前言：

vue和React框架应用广泛，封装了DOM操作
但DOM操作一直都会前端工程师的基础、必备知识
只会vue而不懂DOM操作的前端程序员，不会长久

`DOM相关面试题`

我们在回答问题的时候可以从以下几点去回答

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

DOM

JavaScript操作网页的接口，全称为“文档对象模型(Document Object Model)。有这几个概念：文档、元素、节点
整个文档是一个文档节点
每个标签是一个元素节点
包含在元素中的文本是文本节点
元素上的属性是属性节点
文档中的注释是注释节点

DOM本质 DOM树：

DOM树是结构，树是由DOM元素和属性节点组成的，DOM的本质是把html结构化成js可以识别的树模型；
有了树模型，就有了层级结构，层级结构是指元素和元素之间的关系父子，兄弟。

javascript操作网页的接口，
首先，在原生js中我们要操作对象从中我们要 获取、创建、删除、修改、节点之间的关系

获取：

通过id：getElementById
2.通过name：getElementByName
3.通过标签名：getElementByTagName
4.通过类名：getElementByClassName
5.通过选择器获取一个元素：querySelector
6.通过选择器获取多个元素：querySelectorAll
7.获取html标签：document.documentElement
8.获取body标签：document.body

创建创建新节点（document调用）

创建一个节点：document.createElement();
创建一个文本节点：document.createTextNode();
/创建一个DOM片段：createDocumentFragment()

删除

只能通过父节点删除子节点
vnode.parentElement.removeChild(vnode);

修改
添加、移除、替换、插入（父元素调用）

添加：appendChild()
移除：removeChild()
替换：replaceChild()
插入：insertBefore()

关系

获取所有的子节点：childNodes
获取所有的子元素节点(常用)：children
获取第一个元素：firstElementChild
获取最后一个元素：lastElementChild
获取当前节点的父节点：parentNode
获取当前节点的第一个兄弟元素：previousElementSibling
获取当前节点的后一个兄弟元素：nextElementSibling

查找（document调用）

getElementsByTagName() //通过标签名称一组元素
getElementsByName() //通过元素的Name属性的值一组元素
getElementById() //通过元素Id，唯一性单个元素
getElementByClassName()//通过c元素lass获取一组元素
qurySelectorAll(‘选择器’) // 通过选择器获取一组元素
querySelector(“选择器”) // 通过选择器获取单个元素

关系（元素调用前三个父元素调用）

childNodes// 获取所有的子节点
children // 获取所有的子元素节点 (常用)
firstElementChild 获取第一个元素
lastElementChild 获取最后一个元素
parentNode 获取当前节点的父节点
previousElementSibling获取当前节点的前一个兄弟元素
nextElementSibling 获取当前节点的后一个兄弟元素

DOM节点的Attribute和Property有何区别

//DOM节点的property
const pList = document.querySelectorAll('p')
const p = pList[0]
console.log(p.style.width) //获取样式
p.style.width='100px' //修改样式
console.log(p.className) //获取class
p.className='p1' //修改 class
//获取nodeName和nodeType
console.log(p.nodeName)
console.log(p.nodeType)

DOM节点的attribute

const pList=document.querySelectorAll('p')
const p = pList[0]
p.getAttribute('data-name')
p.setAttribute('data-name','imooc')
p.getAttribute('style')
p.setAttribute('style','font-size:30px')

property和attribute

property:修改对象属性，不会体现到html结构中
attribute:修改html属性，会改变html结构
两者都有可能引起DOM重新渲染
property:修改对象属性，不会体现到HTML结构中

DOM性能

DOM操作非常‘昂贵’，避免频繁的DOM操作
对DOM查询做缓存
将频繁操作改为一次性操作

如何提高Dom性能优化页面
代码展示:

//将频繁操作改为一次性操作
const listNode = document.getElementById('list');
//创建一个文档片段,此时还没有插入到DOM树中
const frag = document.createDocumentFragment();
//执行插入
for(let x = 0;x<10;x++){
const li=document.createElement('li');
li.innerHTML='List item'+x
frag.appendChild(li)
}
//都完成之后,再插入DOM树中
listNode.appendChile(frag)