DOM操作总结  (｡♥ᴗ♥｡) 哇！！

最新推荐文章于 2024-09-30 13:14:49 发布
最新推荐文章于 2024-09-30 13:14:49 发布
阅读量7.7k 收藏 11
点赞数 4
分类专栏： 前端 文章标签： DOM操作 DOM节点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40693643/article/details/104134802
版权
知识点
  • DOM 本质
  • DOM 节点操作
  • DOM 结构操作
  • DOM 性能

前言

各种框架层出不穷，但DOM操作一直都会是前端工程师的基础，必备知识。
只会Vue和React等框架，而不懂DOM操作的前端程序员们。。。在这里插入图片描述

DOM的本质？

Do you know？

在这里插入图片描述
首先，先了解一下什么是xml 。 上代码：

<?xml version="1.0" encoding="ISO-8859-1"?>
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>

XML （可扩展标记语言 EXtensible Markup Language）
XML 是一种标记语言， 被设计用来传输和存储数据，而非显示数据（HTML就被设计用来显示数据）
XML使用的标签没有被预定义，你需要自行定义标签。
SGML、HTML、XML、XHTML、HTML5 之间的关系，知道否？

HTML是一种特殊的XML。它遵循W3C的规定，各种规定，必须先写什么，怎么写什么。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <p>跟着W3C标准，有饭吃。。。ヽ(￣▽￣)ﾉ</p>
    </div>
</body>
</html>

在这里插入图片描述
那么如果是一个字符串对象（html一大坨）的话，让浏览器，js处理是非常不方便的。
如何查询，如何操作等等比较麻烦。所以浏览器拿到代码之后。。。
DOM可以理解为浏览器把拿到的html代码，结构化一个浏览器能识别并且js可操作的一个模型而已（也就是DOM结构树）

树结构什么的不要我讲了吧在这里插入图片描述

DOM 节点操作

获取 DOM 节点
  • 通过元素类型的方法来操作：
  1. document.getElementById(); //id名，在实际开发中较少使用，选择器中多用class id一般只用在顶级层存在 不能太过依赖id
  2. document.getElementsByTagName(); //标签名
  3. document.getElementsByClassName(); //类名
  4. document.getElementsByName(); //name属性值，一般不用
  5. document.querySelector(); //css选择符模式，返回与该模式匹配的第一个元素，结果为一个元素；如果没找到匹配的元素，则返回null
  6. document.querySelectorAll() //css选择符模式，返回与该模式匹配的所有元素，结果为一个类数组

注意：

  • 前缀为document，意思是在document节点下调用这些方法，当然也可以在其他的元素节点下调用哦！
  • querySelector()和querySelectorAll()两个方法为静态的，不是实时的，保存的是当时的状态，是一个副本，即：在以后的代码中通过方法使所选元素发生了变化，但该值依然不会改变，因此使用有局限性，一般不用，除非就想得到副本。
    在这里插入图片描述
  • 根据关系树来获取节点（遍历节点树）：
    根据前面，我们已经知道：DOM（文档对象模型）可以将任何HTML、XML文档描绘成一个多层次的节点树。所有的页面都表现为以一个特定节点为根节点的树形结构。html文档中根节点为document节点。
    在这里插入图片描述
    所有节点都有nodeType属性，代表节点的不同类型，通过nodeType属性可以来判断节点的类型。

经常使用的节点主要有以下几种类型：

  1. Element类型（元素节点）：nodeType值为 1
  2. Text类型（文本节点）：nodeType值为 3
  3. Comment类型（注释节点）：nodeType值为 8
  4. Document类型（document节点）：nodeType值为 9

其规定的一些常用的属性有:

  • document.body document.head 分别为HTML中的 <body> <head>
  • document.documentElement为<html>标签

所有的节点都有 hasChildNodes()方法，用来判断有无子节点 有一个或多个子节点时返回true

通过一些属性可以来遍历节点树：

  1. parentNode //获取所选节点的父节点，最顶层的节点为#document
  2. childNodes //获取所选节点的子节点们
  3. firstChild //获取所选节点的第一个子节点
  4. lastChild //获取所选节点的最后一个子节点
  5. nextSibling //获取所选节点的后一个兄弟节点 列表中最后一个节点的nextSibling属性值为null
  6. previousSibling //获取所选节点的前一兄弟节点 列表中第一个节点的previousSibling属性值为null

注意：
由于文档中的节点类型较多，遍历子节点的结果很多时候并不能得到我们想要的结果。
小心哦！！空文本也是文本节点！
使用遍历元素节点则很方便。在这里插入图片描述

  • 基于元素节点树的遍历（遍历元素节点树）：
  1. parentElement　//返回当前元素的父元素节点（IE9以下不兼容）
  2. children // 返回当前元素的元素子节点
  3. firstElementChild //返回的是第一个元素子节点（IE9以下不兼容）
  4. lastElementChild //返回的是最后一个元素子节点（IE9以下不兼容）
  5. nextElementSibling //返回的是后一个兄弟元素节点（IE9以下不兼容）
  6. previousElementSibling //返回的是前一个兄弟元素节点（IE9以下不兼容）

注意：
这些获取节点的方式，返回值要么是一个特定的节点，要么是一个集合HTMLCollection,这个节点的集合是一个类数组。

HTML中的 attribute 和 JavaScript中的 property
attribute

attribute是HTML标签中定义的属性(修改html属性，会改变html结构)，它的值只能是字符串。
attribute 有三个方法：setAttribute() , getAttribute(), removeAttribute()

property

property是JavaScript为元素对象定义的属性（修改对象属性，不会体现到html结构中）
property 属性可以看作 DOM 对象的键值对，用点操作符修改。它也可以和其他的 JavaScript 对象一样添加自定义的属性以及方法。property 的值可以是任何的数据类型，对大小写敏感。

attribute 和 property 共同拥有的属性

虽然Attribute和Property定义的属性分别在不同层面上，但是有以下几个属性是共享的：
id class lang dir title

<div id="div" class="class" lang="lang" dir="dir" title="title" user="user" >

 var ele = document.getElementById('id');
 
 console.log(ele.getAttribute('id'))    // id
 console.log(ele.getAttribute('class')) // class
 console.log(ele.getAttribute('lang'))  // lang
 console.log(ele.getAttribute('dir'))   // ltr
 console.log(ele.getAttribute('title')) // title
 console.log(ele.getAttribute('user'))  // user

 ele.user1= 'user1'
 console.log(ele.id)                    // id
 console.log(ele.className)             // class
 console.log(ele.lang)                  // lang
 console.log(ele.dir)                   // ltr
 console.log(ele.title)                 // title
 console.log(ele.user1)                 // user

 console.log(ele.user)                  // undefined
 console.log(ele.getAttribute('user1')) // null

自定义的 property 不会出现在 html 代码中，只存在 js 中。因此，ele.getAttribute(‘user1’) 结果为：null

html 标签的5个标准特性：id，title，lang，dir，className（在DOM中以property方式操作这几个特性会同步到html标签中）。所以即使在html中没有指定id、title等，也会默认赋予一个空串，通过property属性（点操作符）可以访问。
而除此之外在html中设置的其他属性是不能通过Property访问到的（除了attribute特有的属性）。因此，ele.user 结果为：undefined

注意：
有一些比较特殊的情况：

- input 元素的 value
var input1 = document.getElementById('input1'); // 获取id为'input1' 的input元素
input1.setAttribute('value', 'test');  // 用setAttribute()方法设置value属性为'test'
console.log(input1.value); // test

a.value = 'change';   // property方式设置value
console.log(a.getAttribute('value')); // test

用点操作符修改 value 值，并不会同步到 attribute 上；但是通过 setAttribute 修改属性值，会同步到 property 上。

- 表单
<input type='radio' checked='checked' id='radio'>
<script>
  var radio = document.getElementById('radio');
  console.log(radio.getAttribute('checked')); // 'check'
  console.log(radio.checked); // true
</script>

一些表单元素，对于这些特殊的 attribute 节点，只要存在该节点，对应的 property 就为true，disabled 类似

- href
<a href='a.html' id='web'> </a>
<script>
  var radio = document.getElementById('web');
  console.log(web.getAttribute('href')); // 'a.html' 
  console.log(web.href); // 绝对路径
</script>

attribute 取得是相对路径；property 取得是绝对路径。

建议：
尽量使用property,因为property可能会在js的一些机制中避免DOM的重新渲染，而attribute一旦改了html结构，则一定会引起DOM重新渲染。

以下两种情况用attribute：

  1. 自定义 attribute 标签，因为它不能同步到 property 上。
  2. 访问内置的 html 标签的 attribute，如 input 的 value（可以用来检验 value 值是否改变）

DOM 结构操作

  • 新增/插入节点
  • 获取子元素列表，获取父元素
  • 删除子元素

各种DOM操作，请读者自由发挥，耍起来哟~~
一定要记得多敲敲！！！在这里插入图片描述
示例：主要代码如下

<div id="div1" class="container">
	<p id="p1">一段文字 1</p>
    <p>一段文字 2</p>
    <p>一段文字 3</p>
</div>
<div id="div2">
    <img src="https://img-blog.csdnimg.cn/20200201200740869.jpg"/>
</div>

const div1 = document.getElementById('div1')
const div2 = document.getElementById('div2')

// 新建节点
const newP = document.createElement('p')
newP.innerHTML = 'this is newP'
// 插入节点
div1.appendChild(newP)

// 移动节点
const p1 = document.getElementById('p1')
div2.appendChild(p1)

// 获取父元素
console.log( p1.parentNode )

// 获取子元素列表
const div1ChildNodes = div1.childNodes
console.log( div1.childNodes )
const div1ChildNodesP = Array.prototype.slice.call(div1.childNodes).filter(child => {
    if (child.nodeType === 1) {
        return true
    }
    return false
})
console.log('div1ChildNodesP', div1ChildNodesP)

// 删除子元素
div1.removeChild( div1ChildNodesP[0] )

DOM 性能

DOM 操作非常“昂贵”，避免频繁的DOM操作。

  • 对DOM 查询做缓存
// 不缓存 DOM 查询结果
for (let = 0; i < document.getElementsByTagName('p').length; i++) {
	// 每次循环，都会计算 length, 频繁进行 DOM 查询
}

// 缓存 DOM 查询结果
const pList = document.getElementsByTagName('p')
const length = pList.length
for (let i = 0; i < length; i++) {
	// 缓存 length, 只进行一次 DOM 查询
}
  • 将频繁操作改为一次性操作
const list = document.getElementById('list')

// 创建一个文档片段，此时还没有插入到 DOM 结构中
const frag = document.createDocumentFragment()

for (let i  = 0; i < 20; i++) {
    const li = document.createElement('li')
    li.innerHTML = `List item ${i}`

    // 先插入文档片段中
    frag.appendChild(li)
}

// 都完成之后，再统一插入到 DOM 结构中
list.appendChild(frag)

console.log(list)
复习回顾在这里插入图片描述
  • DOM 是哪种数据结构
    • 树（DOM树）
  • DOM 操作的常用API
    • DOM 节点操作
    • DOM 结构操作
    • attribute 和 property 操作
  • attribute 和 property 的区别
    • attribute：修改html属性，会改变html结构
    • property：修改对象属性，不会体现到html结构中
    • 两者都有可能引起DOM重新渲染
  • 一次性插入多个DOM节点，考虑性能
    • 你可以翻上去再瞧瞧
神小夜
关注
专栏目录
DOM基础教程之使用DOM控制表格
01-19
表格的css控制就先不说了，首先分享下表格常用的DOM 表格添加操作的方法常用的为insertRow()和insertCell()方法。 row是从零开始计算起的，例如： 代码如下:var oTr = document.getElementById(“member”).insertRow(2) 是指将新行添加到第二行。 代码如下: var aText = new Array(); aText[0] = document.createTextNode(“fresheggs”); aText[1] = document.createTextNode(“W610”); aText[2] = d
DOM-动态操作心得
weixin_30653023的博客
03-10 127
这个知识点都是之前看过的,就当是复习了 一、创建元素的三种方法 　　第一种: document.write() 识别标签 但会覆盖之前内容 　　第二种: 用元素自身的innerHTML方法 不识别标签 但可以不覆盖之前内容 ul.innerHTML += "<li></li>"; 　　第...
前端——DOM与BOM总结
最新发布
qq_53256193的博客
09-30 1948
DOM全称为 “Document Object Model”，文档对象模型，提供操作HTML文档的方法。（注：每个html文件在浏览器中都视为一篇文档,操作文档实际就是操作页面元素。当网页加载时，浏览器就会自动创建当前页面的文档对象模型（DOM）。在DOM中，文档的所有部分（例如元素、属性、文本等）都会被组织成一个树结构（类似于族谱），树中每一个分支的终点称为一个节点，每个节点都是一个对象。
DOM详解
m0_48224507的博客
06-10 7402
文章目录一、什么是DOM1. 什么是DOM2. 为什么学习DOM3. 何时会用到DOM4. DOM标准5. DOM能做的5件事二、DOM树1. 什么是DOM树2. 何时会生成DOM树三、查找1. 不需要查找就可直接获得的4种节点对象:2. 按节点间关系查找3. 示例: 输出指定元素，并用节点间关系查找想要的元素4. 按HTML特征查找: 4个函数5.查找指定的元素，并修改元素的样式总结 一、什么是DOM 1. 什么是DOM 一套专门操作网页内容的对象和方法的集合。 2. 为什么学习DOM ECM
2020-04-26
ojzct的博客
04-26 270
千里之行，始于足下！
DOM学习笔记（二）
zhenyu5665的博客
05-03 1万+
盒子模型 盒子模型属性 在JS中通过相关属性可以获取（设置）元素的样式 信息，这些属性就是盒子模型属性（基本上都是有关样式的） client clientTop/ clientLeft： 获取当前元素上 / 左边框的宽度 clientWidth/ clientHeight： 获取当前元素可视区域的宽高（包括padding），和内容溢出无关，就是我们自己设置的宽高+padding 获取当前页面...
什么是DOM和BOM？
热门推荐
似水流年QC的博客
06-01 2万+
DOM 全称是 Document Object Model，也就是文档对象模型。提供操作页面元素的方法和属性，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。DOM 树DOM树是Web页面的模型，当浏览器加载一个Web页面时，它会创建这个页面的模型，称为DOM树。DOM树主要由4类主要节点组成：文档节点，元素节点，属性节点，文本节点。①.文档节点：在树的顶端是文档节点，它呈现整个页面。②.元素节点：需要访问DOM树时，需要从查找元素开始。
JavaScript DOM节点操作方法总结
11-25
下面就分别从对元素节点的操作和对属性节点的操作来介绍。 元素节点 查 在对DOM进行增删改之前，首先要找到对应的元素。具体的查找方法如下： getElementByID() // 得到单个节点 getElementsByTagName() // 得到...
jQuery常见面试题之DOM操作详析
12-10
关于JQ的DOM操作面试问题很多，可以从各个点问，所以列举几个常见问题，毕竟面试只是过程，重要的是知识自己掌握了。 面试题一：JQ中html()、text()和val()区别？ 面试题二：JQ中find()、has()和filter()区别？ 面试...
JavaScript中 DOM操作方法小结
01-21
DM是(Document Object Model)的简称。 一.找元素 document.getElementById() 根据id选择器找，最多找一个； document.getElementsByName() 根据name找，找出的是数组；  document.getElementsByclassName()...
javascript DOM 操作.doc
01-15
javascript DOM 操作 javascript DOM 操作是指在客户端使用javascript语言来操作文档对象模型（Document Object Model，DOM），以便于动态地更改网页的内容和结构。下面是javascript DOM 操作的相关知识点： IE 中...
前端DOM操作查询手册
12-01
前端DOM操作查询手册
♥️Javascript之DOM♥️
欢迎
09-10 2166
目录 节点 Node类型 属性 方法 Document类型 属性 DOM编程界面 查找元素 添加元素 Element类型 属性 Text类型 属性和方法 文档对象模型（DOM）是网页的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式——程序可以对结构树进行访问，以改变文档的结构，样式和内容。 浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM T...
什么是DOM（超详细解释，建议收藏！！！）
weixin_58091723的博客
08-25 6891
元素节点表示 HTML 元素，属性节点表示属性，文档类型节点表示文档类型，注释节点表示注释。所有的节点和最终的树状结构，都有规范的对外接口。其中，子节点接口包括firstChild（第一个子节点）和lastChild（最后一个子节点）等属性，同级节点接口包括nextSibling（紧邻在后的那个同级节点）和previousSibling（紧邻在前的那个同级节点）属性。文档里面最高的HTML标签，一般是，它构成树结构的根节点（root node），其他HTML标签节点都是它的下级。
Dom【基础篇】
渣渣旭的博客
08-29 3874
Dom【基础篇】
DOM 简介 | 深入了解DOM
青春木鱼的博客
09-05 5754
W3C DOM由以下三部分组成：核心DOM - 针对任何结构化文档的标准模型。XML DOM - 针对XML文档的标准模型。HTML DOM - 针对HTML文档的标准模型。DOM是一种提供对文档访问或修改方法的模型，它的范围很广，但对于 web 开发者来说，往往都认为它是指JavaScript在浏览器访问和修改html 文档的一种技术，但实际上范围远不局限在这里。
Dom详细讲解
qq_51986661的博客
11-25 6885
文档对象模型，英文全称为Document Object Model，它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。D：Document，文档，表示的整个Html的网页文档O：Object, 对象，将网页的每一部分（标签）转换为每一个对象M：Model，模型，使用模型来表示对象之间的关系，方便我们获取。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来，让脚本来操作页面，使
任务清单项目
qq_58849698的博客
07-30 4935
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <titl...
cmd命令
xtulollipop
08-05 618
cmd命令大全（第一部分） 　　winver———检查Windows版本 　　wmimgmt.msc—-打开windows管理体系结构(WMI) 　　wupdmgr——–windows更新程序 　　wscript——–windows脚本宿主设置 　　write———-写字板 　　winmsd———系统信息 　　wiaacmgr——-扫描仪和照相机向导 　　winchat
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

神小夜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值