JavaScript 关于DOM的操作总结

HTML DOM 方法

查找 HTML 元素

改变 HTML 元素

添加和删除元素

添加事件处理程序

查找 HTML 对象

2、查找HTML元素

1、通过 CSS 选择器查找 HTML 元素

如果您需要查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素，请使用 querySelectorAll() 方法。

var x = document.querySelectorAll("p.intro");

2、通过 HTML 对象选择器查找 HTML 对象

本例查找 id=“frm1” 的 form 元素，在 forms 集合中，然后显示所有元素值

var x = document.forms["frm1"];
var text = "";
 var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
```![在这里插入图片描述](https://img-blog.csdnimg.cn/4b62302423954feda150621039b7ec38.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6eXNoaXpodQ==,size_16,color_FFFFFF,t_70)

在这里插入图片描述

3、HTML

document.write() 可用于直接写入 HTML 输出流

千万不要在文档加载后使用 document.write()。这么做会覆盖文档。

2、改变html样式

如需更改 HTML 元素的样式，请使用此语法

document.getElementById(id).style.property = new style

3、触发事件

当用户进入后及离开页面时，会触发 onload 和 onunload 事件。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。

onload 和 onunload 事件可用于处理 cookie。

onchange 事件

onmouseover 和 onmouseout 事件

onmousedown, onmouseup 以及 onclick 事件

首先当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup 事件被触发；最后，当鼠标点击完成后，onclick 事件被触发。

4、addEventListener() 方法

addEventListener() 方法为指定元素指定事件处理程序。

addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。

removeEventListener() 方法轻松地删除事件监听器

element.addEventListener(event, function, useCapture);
/*
第一个参数是事件的类型（比如 "click" 或 "mousedown"）。

第二个参数是当事件发生时我们需要调用的函数。

第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。
*/

//请勿对事件使用 "on" 前缀；请使用 "click" 代替 "onclick"。

向 Window 对象添加事件处理程序

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

传递参数

element.addEventListener("click", function(){ myFunction(p1, p2); });

事件冒泡还是事件捕获？

使用“useCapture”参数来规定传播类型

addEventListener(event, function, useCapture);
//默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播。

removeEventListener() 方法

removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序

element.removeEventListener("mousemove", myFunction);

4、DOM导航

1、在节点之间导航

• parentNode
• childNodes[nodenumber]
• firstChild
• lastChild
• nextSibling
• previousSibling

2、访问

访问 innerHTML 属性等同于访问首个子节点的 nodeValue

var myTitle = document.getElementById("demo").firstChild.nodeValue;var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

3、DOM 根节点

有两个特殊属性允许访问完整文档：

• document.body - 文档的 body
• document.documentElement - 完整文档

4、nodeName

• nodeName 是只读的
• 元素节点的 nodeName 等同于标签名
• 属性节点的 nodeName 是属性名称
• 文本节点的 nodeName 总是 #text
• 文档节点的 nodeName 总是 #document

5、nodeValue 属性

• 元素节点的 nodeValue 是 undefined
• 文本节点的 nodeValue 是文本文本
• 属性节点的 nodeValue 是属性值

6、nodeType 属性

nodeType 属性返回节点的类型。nodeType 是只读的。

5、创建新节点

创建新 HTML 元素（节点）

<div id="div1"><p id="p1">这是一个段落。</p><p id="p2">这是另一个段落。</p></div><script>var para = document.createElement("p");var node = document.createTextNode("这是新文本。");para.appendChild(node);var element = document.getElementById("div1");element.appendChild(para);</script>

insertBefore()

删除已有 HTML 元素

如需删除某个 HTML 元素，您需要知晓该元素的父

parent.removeChild(child);

替换 HTML 元素

如需替换元素的，请使用 replaceChild() 方法：