DOM

程序员文章站 2022-06-26 08:40:56

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

目录

一、什么是DOM

二、DOM节点

1.DOM节点的分类

2.获取元素节点

3.获取属性节点

4.获取文本节点

5.操作元素节点

三、事件

PHP使用DOM对XML解析处理操作示例

Android编程解析XML方法详解(SAX,DOM与PULL)

java dom4j解析xml文件代码实例分享

dom4j操作xml的demo(分享)

java DOM4J 读取XML实例代码

java使用dom4j操作xml示例代码

使用jaxp进行dom解析_动力节点Java学院整理

Android开发之DOM解析xml文件的方法

Dom4j解析XML_动力节点Java学院整理

在java中使用dom4j解析xml(示例代码)