欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

DOM

程序员文章站 2022-03-13 07:55:42
1.什么是DOM？ DOM是文档对象模型（Document Object Model），在页面加载时浏览器会自动创建。HTML DOM 模型被构造为对象的树。如图： HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节 ......

目录

一、什么是DOM

1.DOM是文档对象模型
     为文档提供了结构化表示，并定义如何通过脚本来访问文档结果目的就是为了能让JS操作html元素而制定的一个规范。

2.处理网页内容的方法和接口。

3.DOM是一个复合的数据类型。
      DOM就是HTML页面的模型，将每个标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的元素进行编程控制。比如通过操作文本框的DOM对象，就可以读取文本框中的值、设置文本框中的值。

二、DOM节点

1.在HTML当中一切都是节点。
2.整个文档就是一个文档节点。
3.每一个HMTL标签都是一个元素节点（标签）。
4.标签中的文字则是文字节点。（文本）。
5.标签的属性是属性节点。（属性）
6.节点都是对象

1.DOM节点的分类

DOM节点可以分三类：
标签：是元素节点
文字:是文本节点
属性：是属性节点

2.获取元素节点

一般我们操作的都是元素节点，很少操作属性节点和文本节点，节点获取到后是一个对象形式的存在，可以操作它的属性。

1.通过id获取

<body>
<div id="box">
<div>
</body>
<script>
document.getElementById('box');
</script>

document.getElementById可以获取到指定Id的元素，返回值是一个元素节点。

2.通过标签获取

<body>
<div id="box">
<div>
</body>
<script>
document.getElementsByTagName("div")
</script>

document.getElementsByTagName可以获取指定类型的标签，它的返回值时一个数组。即使只有一个div标签，也返回的是一个数组。

3.通过类名获取

<body>
<div class="box">
<div class="box">
<div>
</body>
<script>
document.getElementsByTagName("div")
</script>

document.getElementsByClassName可以获取指定类名的标签，返回值也是一个数组。

4.通过元素节点之间的关系获取。
节点在文档中是有关联的，在嵌套的盒子里，父盒子叫父节点，子盒子叫子节点，同级之间的子盒子叫兄弟节点，兄弟节点又可以分前后节点。

<body>
		<div id="father">
			<div id="son"></div>
			<div id="brother"></div>
		</div>
</body>
<script>
</script>

以这样一个模型为例
5.获取父元素节点
首先要根据id获取到一个子节点，
document.getElementById(‘son’);
之后通过这个子节点来访问父节点
document.getElementById(‘son’).parentNode
这样就能获取到id为father的节点。

这是在不知道父节点是谁的情况下，可以使用。

6.获取下一个节点
获取下一个节点需要注意的是，在不同浏览器中下一个节点的定义不一样，在E678中指下一个元素节点（标签）没有空格或者换行节点，在火狐谷歌IE9+以后的下一个节点不止元素节点（包括空文档和换行节点）。
空文档和换行节点就是代码里的空格或者另起一行写代码

document.getElementById(‘son’).nextSibling
IE678中指下一个元素节点（标签）。在火狐谷歌IE9+以后都指的是下一个节点（包括空文档和换行节点）。
要是把上面的模型这么写

<body>
		<div id="father">
			<div id="son"></div><div id="brother"></div>
		</div>
</body>
<script>
</script>

这样获取的下一个节点肯定就是id为brother的元素节点了。

document.getElementById(‘son’).nextElementSibling在火狐谷歌IE9都指的是下一个元素节点。

综上，可以看出在IE678中获取不到空格节点或者换行节点，只能获取元素节点。可以写一个兼容性写法：使在IE678和火狐谷歌IE9+都获取的是下一个元素节点

document.getElementById('son').nextElementSibling ||document.getElementById('son').nextSibling

在IE678运行时，由于IE678不支持nextElementSibling，根据||或运算的规则，就会运行后面的nextSibling，这样获取的就是下一个元素节点。而在火狐谷歌IE9+运行时，两个都支持，根据||或运算规则，就会运行前面的一个代码nextElementSibling，这样获取的也是元素节点。

7.获取上一个节点
同获取下一个节点一样，在不同浏览器的上一个节点，指代的不一样。
document.getElementById(‘brother’).previousSibling在IE678中指前一个元素节点,在火狐谷歌IE9+以后都指的是前一个节点（包括空文档或换行节点）。
document.getElementById(‘brother’).previousElementSibling在火狐谷歌IE9都指的是前一个元素节点。
兼容性写法：

document.getElementById('brother').previousElementSibling||document.getElementById('brother').previousSibling

这样无论在哪个浏览器中获取的前一个节点都是元素节点。

8.获取第一个子节点
子节点在不同的浏览器中指代的也不一样。
firstChild：在IE678中指第一个子元素节点（标签），在火狐谷歌IE9+以后都指的是第一个节点，包括空文档。就是代码的空格。
firstElementChild:在火狐谷歌IE9都指的第一个元素节点。
兼容性写法：

document.getElementById('father').firstElementChild || document.getElementById('father').firstChild

9.获取最后一个子节点
lastChild：在IE678中指最后一个子元素节点（标签），在火狐谷歌IE9+以后都指的是最后一个节点。
要是上面代码改成

<body>
		<div id="father">
			<div id="son"></div>
			<div id="brother"></div></div>
</body>
<script>
</script>

这样最后一个节点就是元素节点了。
lastElementChild：火狐谷歌IE9都指的最后一个元素节点
兼容性写法：

document.getElementById('father').lastElementChild ||document.getElementById('father').lastChild

10.获取所有子节点
childNodes：会返回所有的子节点，包括空格或换行。一行代码换行时，只有一个空文档节点。
children：会返回所有的元素节点，不包括空格和换行，在IE678里注释节点也会被打印出来

11.获取所有兄弟节点
这个没有找到属性来获取。可以自己写一个方法。

function siblings(elm) {
		var a = [];
		var p = elm.parentNode.children;
		var pl = p.length'
		for(var i =0;i<pl;i++) {
			if(p[i] !== elm)
			{ 
			a.push(p[i])
			};
		}
		return a;
}

逻辑就是通过一个节点，先获取父节点下的所有子元素节点，再遍历这个数组，判断是否等于自己，不等与自己就存放到一个新数组中。最后返回这个新数组。
这样siblings方法就变成了一个获取所有兄弟节点的方法了。

3.获取属性节点

获取属性节点先要取到对应的元素节点

<body>
<div id="box" style="width:200px">
<div>
</body>
<script>
var father = document.getElementById('box');
var attribute = father.getAttributeNode('style');
</script>

getAttributeNode就能获取到style这个属性节点。属性节点其实就是元素节点的一个属性，获取元素节点后，他的属性中就存在了这个属性节点，没必要这么做。

4.获取文本节点

获取文本节点没有直接的方法，一般获取都是用元素的InnerHtml或者innerText打印出来
或者就是写代码时保证文本标签前面没有空格，这样双标签里的第一个子节点就必定是文本节点了

<body>

<div id="father" style="width: 100px;" class="mm" >aa</div>

<div id="mother"></div>
</body>
<script>
    var fater= document.getElementById('father');
     var d = fater.firstChild.nodeValue;
    console.log(d);
</script>

这时候打印出来的就是aa，是节点的值，要是打印fater.firstChild，会打印“aa”,带双引号，表示文本节点。

5.操作元素节点

在获取到节点之后，就可以对节点进行一些操作。

<body>
		<div id="father">
			<div id="son"></div>
			<div id="brother"></div>
		</div>
</body>
<script>
</script>

以这个例子为例
1.创建新元素节点

var a = document.createElement("div")

这样就能创建一个div标签

2.在父节点最后插入创建的新元素节点

先获取父节点
document.getElementById(‘father’).appendChild(a)
这样文档结构就变成了

<body>
		<div id="father">
			<div id="son"></div>
			<div id="brother"></div>
			<div ></div><!-- 这是新建的元素-->
		</div>
</body>
<script>
</script>

3.在指定地方前插入元素节点

var fater= document.getElementById('father')
var son= document.getElementById('son')
var newNode = document.createElement("div")
fater.insertBefore(newNode,son)

这样就能在id为son的盒子前面新增一个div盒子。

4.删除元素节点

var fater= document.getElementById('father')
var son= document.getElementById('son')
fater.removeChild(son)

这样就会在文档里删除id为son的盒子

5.复制元素节点
cloneNode：复制节点，有一个参数，为boolean值，true表示复制这个节点下的所有子节点和此节点，深复制，false相当于不填，只复制此节点

document.getElementById('father').cloneNode(true)

6.节点的判断
获取到节点后，要是要知道这是什么节点，可以用节点的属性
nodeType来判断节点的类型。
节点. nodeType = 1 表示的是元素节点
节点.nodeType = 2 表示是属性节点
节点.nodeType = 3 是文本节点

7.节点的值
nodevalue来获取节点的值
元素节点的值为null
属性节点的值为就是属性的值
文本节点的值为文字

8.节点的名字
nodeName来获取节点的名字
元素节点的名字是标签
属性节点的名字就是属性
文本节点是#text

9.替换元素节点的类名
元素节点.className.replace(“被替换的类型”，“需要加入的类型”)

10.添加元素节点的类名
元素节点.className + = “空格+新类名”
主要要用加等于，不然的化就是直接设置类名了，而且新类名前面一定要加一个空格，才能拼接到已有的类名后面。没有的话会直接拼到前一个类名上，变成了一个新类名。

4.元素节点的属性

1.获取元素节点的属性

var fater= document.getElementById('father')
  var style =  fater.style

上面获取的是元素的style属性，还能获取元素的其他属性，比如id，class。
获取class类名时要用className
一般修改节点的属性都是操作盒子的样式，所以先要访问style属性，再修改盒子的css样式，这样的修改相当于修改行内样式，优先级是最高的。

上面是点方法，还有一个方法getAttribute

var fater= document.getElementById('father')
  var style =  fater.getAttribute('style')

这样都可以获取写在行内样式的style,但获取不到写在css的style

2.设置元素节点的属性
设置元素的属性和获取元素的属性方法一致，都是点方法，在后面加上要设置的值就可以了。

var fater= document.getElementById('father')
   fater.style.witdh= '500px'

上面就是设置id为father的盒子宽度为500px;注意值要写成字符串形式。
或者方法setAttribute(）

var fater= document.getElementById('father')
   fater.setAttribute('title','test');

上面是设置了盒子的一个title属性，值为test。

3.删除元素节点的属性

var fater= document.getElementById('father')
   fater.removeAttribute('title','test');

这样就把上面添加的属性title给删除掉了。

4.获取元素节点的文本值

<div id="father" style="width: 100px;" class="mm" >aa</div>

</body>
<script>
    var fater= document.getElementById('father');
     fater.innerHTML = "<strong>bb</strong>"
    fater.innerText = "<strong>cc</strong>"
</script>

innerHtml：
获取标签里面的内容，可以通过此方法来设置文字内容，要是设置的时候带有标签会把标签转换为对应的样式。
innerText：
也是获取标签里的文字内容，要是设置的时候带有标签不会把标签转换为对应的样式，会直接把标签显示出来。

5.控件

控件算是一个比较特殊的节点。
控件的value是它所显示的值，innerHtml和innerText无效。

三、事件

事件是核心内容，事件就是一系列的动作，根据这些动作来触发一些样式或内容的变化，正因为有了事件，网页才能和用户真正的交互起来。
1.事件的类型

事件名 解释
onclick 鼠标点击事件
ondblclick 鼠标双击事件
onkeyup 按下键盘后并松开事件
onchange 文本内容或下拉菜单中的选项发生改变的事件
onfocus 输入框获得焦点事件
onblur 输入框失去焦点事件
onmouseover 鼠标悬停事件
onmouseout 鼠标移出事件
onload 网页文档加载事件
onunload 关闭网页事件
onsubmit 表单提交事件
onreset 重置表单事件

2.事件的绑定
事件需要绑定到触发事件的元素节点上，这样才能知道是谁触发了什么事件。

①赋值绑定

 var fater= document.getElementById('father')
fater.onclick = function(){
   逻辑
}

上述就是在id为father的盒子上绑定了一个点击事件。这样的绑定事件一次只能绑定一个，且后面的事件会把前面的事件覆盖

②变量赋值绑定

 var fater= document.getElementById('father')
  fater.onclick = test;
  function test(){
  };

③行内绑定

<body>
<div onclick = "test()"></div>
</body>

<script>
function test(){
  };
</script>

④addEventListener方法绑定

addEventListener(事件类型，事件处理函数，useCaptrue)
usecaptrue嵌套的盒子绑定同名事件
true调用外面的
false调用里面的

⑤attachEvent方法绑定
IE678里attachEvent(事件类型，事件处理函数)

3.一些常用的事件解释

1.onload事件
页面加载事件

window.onload = function(){};

表示页面加载完才会触发这个事件，页面加载完就是文本和图片加载完之后才会执行里面的方法。
因为js的加载和写在html的位置有关，要是写在body标签前，会先加载js文件，而这时候页面上还是没有文档的，可能会报错。所以可以同onload。先加载页面，在加载js文件。

4.监听事件

本文地址：https://blog.csdn.net/m0_48459838/article/details/112539887

相关标签： DOM 前端

上一篇： Java多线程的常用创建方式总结

下一篇： 大神出手：小米8上移植运行Windows 11

推荐阅读