JavaScript 操作 HTML DOM (文档对象模型) 相关知识点

HTML DOM 树 

 

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应

 

查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。常用的有三种方法来做这件事：

• 通过 id 找到 HTML 元素          var x=document.getElementById("intro");
• 通过标签名找到 HTML 元素        var y=x.getElementsByTagName("p");
• 通过类名找到 HTML 元素        var x=document.getElementsByClassName("intro");

可以组合查找，例如

查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素：

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

 

事件句柄　(Event Handlers)

属性	此事件发生在何时...
onabort	图像的加载被中断。
onblur	元素失去焦点。
onchange	域的内容被改变。
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onerror	在加载文档或图像时发生错误。
onfocus	元素获得焦点。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onmouseup	鼠标按键被松开。
onreset	重置按钮被点击。
onresize	窗口或框架被重新调整大小。
onselect	文本被选中。
onsubmit	确认按钮被点击。
onunload	用户退出页面。

 

鼠标 / 键盘属性

属性	描述
altKey	返回当事件被触发时，"ALT" 是否被按下。
button	返回当事件被触发时，哪个鼠标按钮被点击。
clientX	返回当事件被触发时，鼠标指针的水平坐标。
clientY	返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey	返回当事件被触发时，"CTRL" 键是否被按下。
metaKey	返回当事件被触发时，"meta" 键是否被按下。
relatedTarget	返回与事件的目标节点相关的节点。
screenX	返回当某个事件被触发时，鼠标指针的水平坐标。
screenY	返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey	返回当事件被触发时，"SHIFT" 键是否被按下。

 

addEventListener() 方法

语法：element.addEventListener(event, function, useCapture);

useCapture默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

第一个参数是事件的类型 (如 "click" 或 "mousedown").，

                       注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

                     addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件

                     removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄

 

addEventListener浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

注意： IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:

element.attachEvent(event, function);
element.detachEvent(event, function);

//跨浏览器解决办法
var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 所有主流浏览器，除了 IE 8 及更早版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
}

 

创建新的 HTML 元素 (节点) - appendChild()

<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>

 

创建新的 HTML 元素 (节点) - insertBefore()

<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");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

 

移除已存在的元素

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

 

替换 HTML 元素 - replaceChild()

<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 parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

 

HTMLCollection 对象

• getElementsByTagName() 方法返回 HTMLCollection 对象。
• HTMLCollection 对象类似包含 HTML 元素的一个数组。
• HTMLCollection 对象的 length 属性定义了集合中元素的数量。
• HTMLCollection 不是一个数组！
• HTMLCollection 看起来可能是一个数组，但其实不是。
• 你可以像数组一样，使用索引来获取元素。
• HTMLCollection 无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。

 

NodeList  JavaScript HTML DOM 节点列表

• NodeList 对象是一个从文档中获取的节点列表 (集合) 。
• NodeList 对象类似 HTMLCollection 对象。
• 一些旧版本浏览器中的方法（如：getElementsByClassName()）返回的是 NodeList 对象，而不是 HTMLCollection 对象。
• 所有浏览器的 childNodes 属性返回的是 NodeList 对象。
• 大部分浏览器的 querySelectorAll() 返回 NodeList 对象。
• NodeList 对象 length 属性定义了节点列表中元素的数量。

 

HTMLCollection 与 NodeList 的区别

• HTMLCollection 是 HTML 元素的集合。
• NodeList 是一个文档节点的集合。
• NodeList 与 HTMLCollection 有很多类似的地方。
• NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。
• NodeList 与 HTMLCollection 都有 length 属性。
• HTMLCollection 元素可以通过 name，id 或索引来获取。
• NodeList 只能通过索引来获取。
• 只有 NodeList 对象有包含属性节点和文本节点。

节点列表不是一个数组！

节点列表看起来可能是一个数组，但其实不是。

你可以像数组一样，使用索引来获取元素。

节点列表无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。