16.DOM操作

最新推荐文章于 2020-12-14 12:04:32 发布

常蓬cium

最新推荐文章于 2020-12-14 12:04:32 发布

阅读量203

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/lh_changpeng/article/details/107643686

版权

笔记专栏收录该内容

40 篇文章 0 订阅

订阅专栏

文章目录

一.DOM
二.DOM中的获取元素的方法
- 2.1获取元素的方法(节点)
- 2.2 操作属性的方法
三.DOM节点
四. DOM节点的操作
五.获取元素的非行间样式
六.获取元素的偏移量
- 6.1 offsetLeft 和 offsetTop
- 6.2 offsetWidth 和 offsetHeight
七.H5新增自定义属性
拓展:HTMLCollection(元素集合) 和 NodeList(节点集合)

一.DOM

DOM（Document Object Model）：文档对象模型,属于window
其实就是操作 html 中的标签的一些能力
DOM 的核心对象就是 docuemnt 对象
document 对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法
DOM：页面中的标签，我们通过 js 获取到以后，就把这个对象叫做 DOM 对象

1.1 DOM可以操作哪些内容

获取一个元素
移除一个元素
创建一个元素
向页面里面添加一个元素
给元素绑定一些事件
获取元素的属性
给元素添加一些 css 样式

1.2 DOM主要作用

1.主要包括操作html 和 xml 文档内容的基础API。
2.是由w3c组织推荐处理的可扩展标志语言的标准程序接口。

1.3 DOM等级的划分:

1级DOM:
	在1998年10月份成为W3C的提议，由DOM核心与DOM HTML两个模块组成。DOM核心能映射以XML为基础的文档结构，
	允许获取和操作文档的任意部分。DOM HTML通过添加HTML 专用的对象与函数对DOM核心进行了扩展。
2级DOM:
	通过对原有DOM的扩展，2级DOM通过对象接口增加了对鼠标和用户界面事件、范围、遍历(重复执行DOM文档)
	和层叠样式表(CSS)的支持。
3级DOM:
	3级DOM通过引入统一方式载入和保存文档和文档验证方法对DOM进行进一步扩展,DOM3包含一个名为
	“DOM载入与保存”的新模块，DOM核心扩展后可支持XML1.0的所有内容，包括XML、Infoset、XPath、和XML Base。

DOM树:由标签构成的树,叫做dom树

在这里插入图片描述

二.DOM中的获取元素的方法

2.1获取元素的方法(节点)

getElementById 是通过标签的 id 名称来获取标签的
- 因为在一个页面中 id 是唯一的，所以获取到的就是一个元素
- 返回单个元素对象，就算有多个，返回的也是单个元素对象
- 变量的命名规则，最好加数据类型的首字母为前缀
getElementsByClassName 是用过标签的 class 名称来获取标签的
- 因为存在多个class名称一样，所以获取到的是一组元素，在括号当中可以传入多个class值用空格分开
- 获取的是一个伪数组，可以通过需要用索引来获取
- 括号里面的类名顺序对查找元素并没有什么影响,注意:ie6、ie7、ie8当中并不兼容
getElementsByTagName 是用过标签的标签名称来获取标签的
- 获取的是一个伪数组，可以通过需要用索引来获取
- *可以找到所有的标签
querySelector 是按照选择器的方式来获取元素参数都是css选择器
- 选中所有和css选择器匹配的元素
- 也就是说，按照我们写 css 的时候的选择器来获取
- 这个方法只能获取到一个元素，并且是页面中第一个满足条件的元素
- ::first-line ::first-letter 不推荐使用(伪类选择器) ，会被浏览器禁止

querySelectorAll 是按照选择器的方式来获取元素参数都是css选择器

选中和css选择器匹配的第一个元素
这个方法能获取到所有满足条件的元素，以一个伪数组的形式返回

	<body>
	  <div id="box" class="box"></div>
	  <script>
		//getElementById获取标签
	  	var box = document.getElementById('box')
	  	console.log(box) // <div></div>
		//getElementsByClassName获取标签
		var box = document.getElementsByClassName('box')
		console.log(box) // [<div></div>]
		console.log(box[0]) // <div></div>
		//getElementsByTagName获取标签
		var box = document.getElementsByTagName('div')
		console.log(box) // [<div></div>]
		console.log(box[0]) // <div></div>
		//querySelector获取标签
		console.log(document.querySelector('div')) // 获取页面中的第一个 div 元素
		console.log(docuemnt.querySelector('.box')) // 获取页面中第一个有 box 类名的元素
		console.log(document.querySelector('#box')) // 获取页面中第一个 id 名为 box 的元素
		//querySelectorAll获取标签
		console.log(document.querySelectorAll('div')) // 获取页面中的所有的 div 元素
		console.log(docuemnt.querySelectorAll('.box')) // 获取页面中所有有 box 类名的元素
	  </script>
	</body>

2.2 操作属性的方法

获取表单控件(form):元素.value，非表单控件:元素.innerHTML

获取元素的方式获取到页面中的标签以后,操作 DOM 元素的属性把效果展示在页面上
innerHTML:获取元素内部的HTML结构,可以设置元素的内容，解析标签div.innerHTML,div.innerHTML = '<p>hello</p>'
innerText:获取元素内部的文本（只能获取到文本内容，获取不到 html 标签）,可以设置元素内部的文本,不会解析标签,同上
getAttribute:获取元素的某个属性（包括自定义属性）,给元素设置一个属性（包括自定义属性）div.getAttribute('a')
setAttribute:给元素设置一个属性（包括自定义属性）div.setAttribute('a', 100)
removeAttribute:直接移除元素的某个属性div.removeAttribute('class名')
style:专门用来给元素添加 css 样式的,添加的都是行内样式div.style.width = "100px"
className:专门用来操作元素的类名的,也可以设置元素的类名，不过是全覆盖式的操作
- 因为class是保留字，所以用classNamediv.className,div.className = 'test'

三.DOM节点

DOM 的节点我们一般分为常用的三大类 元素节点 / 文本节点 / 属性节点
什么是分类，比如我们在获取元素的时候，获取的叫做元素节点（标签节点）,大到标签，小到注释，都属于节点的一种
比如我们标签里面写的文字，那么就是文本节点,写在每一个标签上的属性，就是属性节点
不同等级、不同类别的DOM 共同构建了DOM树，在DOM树当中，最小的单位就是节点。

3.1 DOM节点分类

3.1.1 元素节点
- 我们通过 getElementBy... 获取到的都是元素节点
3.1.2 属性节点
- 我们通过 innerText 获取到的就是元素的文本节点
3.1.3 文本节点
- 我们通过 innerText 获取到的就是元素的文本节点

3.2 节点关系:

根节点: html
父节点关系(parentNode)
子节点关系(childNode)
同级节点关系()

3.3 节点的分类

在这里插入图片描述

3.4 节点的属性

nodeType：获取节点的节点类型，用数字表示
```
console.log(eleNode.nodeType) // 1
console.log(attrNode.nodeType) // 2
console.log(textNode.nodeType) // 3
```
- nodeType === 1 就表示该节点是一个 元素节点
- nodeType === 2 就表示该节点是一个 属性节点
- nodeType === 3 就表示该节点是一个 注释节点
nodeName：获取节点的节点名称
```
console.log(eleNode.nodeName) // LI
console.log(attrNode.nodeName) // test
console.log(textNode.nodeName) // #text
```
- 元素节点的 nodeName 就是 大写标签名
- 属性节点的 nodeName 就是 属性名
- 文本节点的 nodeName 都是 #text

nodeValue：获取节点的值

console.log(eleNode.nodeValue) // null
console.log(attrNode.nodeValue) // 我是 ul 的一个属性
console.log(textNode.nodeValue) // 换行 + 空格

元素节点没有 nodeValue
属性节点的 nodeValue 就是 属性值
文本节点的 nodeValue 就是 文本内容

汇总:
| - | nodeType | nodeName | nodeValue |
| -------- | -------- | ---------- | --------- |
| 元素节点 | 1 | 大写标签名 | null |
| 属性节点 | 2 | 属性名 | 属性值 |
| 文本节点 | 3 | #text | 文本内容 |

3.5 节点的获取

元素节点:children,parentNode,firstElementChild,lastElmentChild,previousElementSibling,nextElementSibling
文本节点childNodes,firstChild,lastChild,previiousSibling,nextSibling
childNodes：获取某一个节点下 所有的子一级节点
children ：获取某一节点下所有的子一级 元素节点
firstChild：获取某一节点下子一级的 第一个节点
lastChild：获取某一节点下子一级的 最后一个节点.
firstElementChild：获取某一节点下子一级 第一个元素节点
lastElementChild：获取某一节点下子一级 最后一个元素节点
nextSibling：获取某一个节点的 下一个兄弟节点
previousSibling：获取某一个节点的 上一个兄弟节点
nextElementSibling：获取某一个节点的 下一个元素节点
previousElementSibling：获取某一个节点的 上一个元素节点
parentNode：获取某一个节点的 父节点

attributes：获取某一个 元素节点 的所有 属性节点

	<ul class="list">aaa
        <li>11111</li>
        <li class="on">22222</li>test
        <li>33333</li>
        <li>44444</li>ccc
    </ul>
    <script>
        var li = document.querySelectorAll('.list li')
        var oList = document.querySelector('.list')
        var oLi = document.querySelector('.on')
        // 获取所有子元素
        // - children
        var aLi = oList.children
        console.log(aLi)
        // 获取父元素
        // - parentNode
        console.log(oLi.parentNode)
        // 获取空白节点+元素节点
        var aT = oList.childNodes
        console.log(aT)
        // 获取ul里面第一个元素节点
        // firstElmentChild
        var oLi = oList.firstElementChild
        var oLi = oList.children[0]
        // 获取第一个文本节点
        // firstChild
        var oTxt = oList.firstChild
        // 获取最后一个元素节点
        var oLi = oList.lastElementChild
        // 获取最后一个文本节点
        var oTxt = oList.lastChild
        // 获取上一个兄弟元素节点
		var prevNode = oLi.previousElementSibling
        // 获取上一个文本节点
		var prevTxt = oLi.previousSibling
        // 获取下一个兄弟元素节点
        var nextNode = oLi.nextElementSibling
        // 获取下一个文本节点
        var nextTxt = oLi.nextSibling

3.6 属性的操作

可见属性

内置：只要是系统提供的，在标签身上直接写的，还具有功能，就是内置的可见属性
- 对象操作：1点语法；2中括号语法
- 也可以使用：getAttribute、setAttribute、removeAttribute
- 特殊的属性：
  - class：要使用className操作
  - style：样式，值是个对象
非内置：在标签身上直接写的，但是不具有默认功能，就是自定义的可见属性
- 元素.getAttribute(“要获取的属性名”)
- 元素.setAttribute(“要设置的属性名”,“属性值”)
- 元素.removeAttribute(“要删除的属性名”)
  - 内置的可见属性，有很多，其实就是html属性，不一一列出了（见9html属性介绍.html），
  - 只要记住如何操作即可

不可见属性

对象操作：1点语法；2中括号语法

总结:根据节点关系选择节点

选取父节点	下一个/上一个兄弟节点(ie678认识识别)	下一个/上一个兄弟节点(其他浏览器里)	所有浏览器兼容的写法
parentNode	nextSibling/previousSibling	nextElementSibling/ previousElementSibling	var info = oDiv.nextElementSibling 或 oDiv.nextSibling;

总结:选取子节点((ie678认识))

获取第一个子元素	获取最后一个子元素	获取第一个子元素/最后一个(其他浏览器)	获取所有的子节点/获取所有的子标签(不推荐)
firstChild	lastChild	firstElementChild/lastElementChild	childNodes/children

注意:在老版本的ie浏览器里，会把注释也获取到。解决方案:不写注释

四. DOM节点的操作

我们所说的操作无非就是 增删改查（CRUD）
创建一个节点（因为向页面中增加之前，我们需要先创建一个节点出来）
向页面中增加一个节点
删除页面中的某一个节点
修改页面中的某一个节点
获取页面中的某一个节点

4.1 创建一个节点

createElement：用于创建一个元素节点

// 创建一个 div 元素节点
var oDiv = document.createElement('div')

createTextNode：用于创建一个文本节点

// 创建一个文本节点
var oText = document.createTextNode('我是一个文本')

4.2 向页面中加入一个节点

appendChild：是向一个元素节点的末尾追加一个节点

语法： 父节点.appendChild(要插入的子节点)

// 创建一个 div 元素节点
var oDiv = document.createElement('div')
var oText = document.createTextNode('我是一个文本')
// 向 div 中追加一个文本节点
oDiv.appendChild(oText)
console.log(oDiv) // <div>我是一个文本</div>

insertBefore：向某一个节点前插入一个节点

语法：父节点.insertBefore(要插入的节点，插入在哪一个节点的前面)

<body>
  <div>
    <p>我是一个 p 标签</p>
  </div> 
  <script>
  	var oDiv = document.querySelector('div')
  	var oP = oDiv.querySelector('p')
  	// 创建一个元素节点
  	var oSpan = document.createElement('span')
  	// 将这个元素节点添加到 div 下的 p 的前面
  	oDiv.insertBefore(oSpan, oP)
  	console.log(oDiv)
  	/*
  		<div>
  			<span></span>
  			<p>我是一个 p 标签</p>
  		</div>
  	*/
  </script>
</body>

4.3 删除页面中的某一个节点

removeChild：移除某一节点下的某一个节点

语法：父节点.removeChild(要移除的字节点)

<body>
  <div>
    <p>我是一个 p 标签</p>
  </div>
  
  <script>
  	var oDiv = document.querySelector('div')
  	var oP = oDiv.querySelector('p')
    
    // 移除 div 下面的 p 标签
    oDiv.removeChild(oP)
    
    console.log(oDiv) // <div></div>
  </script>
</body>

4.4 修改页面中的某一个节点

replaceChild：将页面中的某一个节点替换掉

语法： 父节点.replaceChild(新节点，旧节点)

<body>
  <div>
    <p>我是一个 p 标签</p>
  </div>
  
  <script>
  	var oDiv = document.querySelector('div')
    var oP = oDiv.querySelector('p')
    
    // 创建一个 span 节点
    var oSpan = document.createElement('span')
    // 向 span 元素中加点文字
    oSpan.innerHTML = '我是新创建的 span 标签'
    
   	// 用创建的 span 标签替换原先 div 下的 p 标签
    oDiv.replaceChild(oSpan, oP)
    
    console.log(oDiv)
    /*
    	<div>
    		<span>我是新创建的 span 标签</span>
    	</div>
    */
  </script>
</body>

4.5 克隆节点:

cloneNode() 复制克隆节点

	<div class="box">1111
        <p>ppppp</p>
    </div>
    <script>
        var oBox1 = document.querySelector('.box')
        // 克隆
        // - obj.cloneNode(true) // 加参数叫深度克隆
        var oBox2 = oBox1.cloneNode(true)
        // console.log(oBox1, oBox2)
        document.body.appendChild(oBox2)
    </script>

4.6 创建一个容器

DocumentFragment – 临时容器（文档碎片）;是一个特殊的节点，并不存在于网页当中
document.createDocumentFragment();
容器创建成功之后可以按照插入节点的方式向其中插入元素。
好处：不要把数据往里面查，提高性能，值加载一次

五.获取元素的非行间样式

我们在操作 DOM 的时候，很重要的一点就是要操作元素的 css 样式
那么在操作 css 样式的时候，我们避免不了就要获取元素的样式
之前我们说过可以用 元素.style.xxx 来获取

5.1 行间样式的获取

<style>
  div {
    width: 100px;
  }
</style>
<body>
  <div style="height: 100px;">
    <p>我是一个 p 标签</p>
  </div>

  <script>
    var oDiv = document.querySelector('div')
		console.log(oDiv.style.height) // 100px
    console.log(oDIv.style.width) // ''
  </script>
</body>

不管是外链式还是内嵌式，我们都获取不到该元素的样式
这里我们就要使用方法来获取了 getComputedStyle 和 currentStyle
这两个方法的作用是一样的，只不过一个在 非 IE 浏览器，一个在 IE 浏览器

5.2 获取非行间样式(非IE)

语法：window.getComputedStyle(元素, null).要获取的属性

	<style>
		div {
		width: 100px;
		}
	</style>
	<body>
		<div style="height: 100px;">
		<p>我是一个 p 标签</p>
		</div>
		<script>
		var oDiv = document.querySelector('div')
		console.log(window.getComputedStyle(oDiv).width) // 100px
		console.log(window.getComputedStyle(oDiv).height) // 100px
		</script>
	</body>

这个方法获取行间样式和非行间样式都可以

5.3 获取非行间样式(IE)

语法： 元素.currentStyle.要获取的属性

<style>
  div {
    width: 100px;
  }
</style>
<body>
  <div style="height: 100px;">
    <p>我是一个 p 标签</p>
  </div>

  <script>
    var oDiv = document.querySelector('div')
		console.log(oDiv.currentStyle.width) // 100px
    console.log(oDiv.currentStyle.height) // 100px
  </script>
</body>

六.获取元素的偏移量

就是元素在页面上的什么位置
我们有几个属性来获取，offsetLeft 和 offsetTop 和 offsetWidth 和 offsetHeight

6.1 offsetLeft 和 offsetTop

获取的是元左边的偏移量和上边的偏移量
分成两个情况来看
没有定位的情况下
- 获取元素边框外侧到页面内侧的距离
有定位的情况下
- 获取元素边框外侧到定位父级边框内侧的距离（其实就是我们写的 left 和 top 值）

6.2 offsetWidth 和 offsetHeight

获取元素 内容宽高 + padding宽高 + border宽高 的和

七.H5新增自定义属性

自定义属性写法 date - 内容:这样的写法就合法了
获取自定义属性： getAttribute('属性名')
新增获取自定义属性的API：.dataset. + 小驼峰 同时自定义属性可以一次设置多个

拓展:HTMLCollection(元素集合) 和 NodeList(节点集合)

nodelist是一个类数组对象,HTMLCollection 类数组"对象"
- 相同点:
  - 1.都是类数组对象，都可以通过length进行循环，都可以通过索引值查找元素
  - 2.虽然这两个对象都具备length等属性，而且和数组非常相似，但是却都不可以使用数组的api
- 不同点:
  - 1.元素集合指的是标签的集合，而节点集合指的是不同节点的集合，也就是说节点当中包括标签，
    但是标签当中不包括节点。可以理解为元素标签是节点的子集，是继承自节点集合而来。
  - 2.二者来源不同。
获取HTMLCollection(动态集合)的常用api:
- getElementsByTagName() ,document.forms
获取NodeList常用API:
- *childNodes
- *querySelectorAll()
- *getElementsByClassName() [在一些比较老的浏览器里时，获取的是NodeList]
Tip:二者获取到的对象都是"动态集合"。
- querySelectorAll() 比较特殊，虽然获取到的对象是一个NodeList,但是确实一个特殊的NodeList集合，叫做NodeStaticList,节点静态集合。
动态集合和静态集合的区别
- 动态集合未来发生改变,在过去也会发生改变,而静态集合则不会

常蓬cium

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
16.DOM操作

文章目录一.DOM1.1 DOM可以操作哪些内容1.2 DOM主要作用1.3 DOM等级的划分:DOM树:由标签构成的树,叫做dom树二.DOM中的获取元素的方法2.1获取元素的方法(节点)2.2 操作属性的方法三.DOM节点3.1 DOM节点分类3.2 节点关系:3.3 节点的分类3.4 节点的属性3.5 节点的获取总结:根据节点关系选择节点总结:选取子节点((ie678认识))四. DOM节点的操作4.1 创建一个节点4.2 向页面中加入一个节点4.3 删除页面中的某一个节点4.4 修改页面中的某一个节
复制链接

扫一扫