你所不了解的javascript操作DOM的细节知识点(一)

这篇文章将带你深入了解JavaScript操作DOM的细节知识点，或许有一些内容是你之前未曾了解到的，希望对你的学习有所启发。

一、初探Node类型

在Web开发中，DOM（文档对象模型）扮演着至关重要的角色。你可能已经知道，DOM1级定义了一个Node接口，这是所有DOM节点类型的基础。这个接口为操作、遍历和修改DOM提供了核心功能。

在JavaScript中，我们可以通过Node类型进行许多操作。例如，我们可以创建新的节点，删除现有节点，修改节点的属性，以及处理节点事件。了解Node类型及其相关方法，对于掌握JavaScript操作DOM至关重要。

二、细节知识点

接下来，我们将深入一些你可能不太了解的JavaScript操作DOM的细节知识点。

1. 节点操作：通过JavaScript，我们可以使用各种方法来创建、删除和替换DOM节点。例如，我们可以使用`document.createElement()`方法来创建新元素，使用`appendChild()`和`removeChild()`方法来添加和删除节点。

2. 属性操作：我们可以使用JavaScript来读取和修改DOM节点的属性。例如，`getAttribute()`和`setAttribute()`方法允许我们获取和设置元素的属性。我们还可以使用`innerHTML`属性来修改元素的内部HTML内容。

3. 事件处理：JavaScript允许我们处理DOM节点上的各种事件，如点击、鼠标移动、键盘输入等。我们可以使用`addEventListener()`方法来添加事件处理程序，并通过事件对象来获取关于触发事件的详细信息。

4. CSS样式操作：我们可以使用JavaScript来读取和修改DOM元素的CSS样式。这包括设置元素的颜色、大小、位置等样式属性。这对于创建动态和交互式的网页非常有用。

这只是JavaScript操作DOM的一些基本细节知识点。实际上，还有许多高级功能和技巧等待你去和学习。希望这篇文章能为你提供一个良好的起点，帮助你在JavaScript操作DOM的道路上更进一步。

在Web开发中，每个节点都有一个nodeType属性，用于标明节点的类型。在Node类型中，有以下几种主要的节点类型：

1. Element节点（Node.ELEMENT_NODE）：用于表示HTML或XML元素。

2. 属性节点（Node.ATTRIBUTE_NODE）：用于表示元素属性。

3. 文本节点（Node.TEXT_NODE）：用于表示元素中的文本。

4. 文档节点（Node.DOCUMENT_NODE）：表示整个文档。

理解这些节点类型对于操作DOM非常重要。例如，以下HTML代码：

```html

```

对应的JavaScript代码可能如下：

```javascript

var test = document.getElementById("test");

if(test.nodeType === Node.ELEMENT_NODE) {

console.log("这是一个元素节点");

}

```

我们也要理解nodeName和nodeValue。nodeName保存的是元素的标签名，而nodeValue一般是null。例如，对于上述HTML代码，如果我们获取div元素的nodeName和nodeValue，结果分别是"DIV"和null。

接下来是节点关系。在DOM中，每个节点都有父节点、子节点和兄弟节点。例如，在以下的HTML代码中：

```html

```

head和body是html元素的子节点，同时也是兄弟节点。它们的父节点是html元素。

在JavaScript中，我们可以使用childNodes属性来获取一个节点的所有子节点。这个属性类似于一个数组，有length属性。但请注意，它并不是真正的数组，例如以下测试代码：

```javascript

var test = document.getElementById("test");

console.log(test.childNodes);

console.log(test.childNodes.length);

```

在标准浏览器和IE9+下，第一行打印的可能是类似"[text, p, text, p, text, p, text]"的结果，第二行打印的是长度。但在IE8及以下版本中，长度可能不会包括文本节点。

每个节点都有parentNode属性，指向文档中的父节点。还有previousSibling和nextSibling属性，分别指向当前节点的上一个和下一个兄弟节点。例如：

```javascript

var test = document.getElementById("test");

if(test.nodeType == 1) {

var secodeChild = test.childNodes[1];

console.log(secodeChild); //

bbbbbb

console.log(secodeChild.previousSibling); //

aaaaaa

console.log(secodeChild.nextSibling); // （如果只有一个节点的话，这两个属性可能都是null）

}

``` 父节点的firstChild和lastChild分别指向父节点中的第一个和最后一个子节点。如果没有子节点，这两个属性都会指向null。例如：

document对象的nodeType值为9，表明它是一个文档节点。其nodeName值为“document”，简洁明了地标识了自己的身份。而关于nodeValue，它的值为null，表示文档节点本身并不包含具体的内容。至于parentNode，它的值同样为null，因为文档节点在DOM树中是根节点，没有父节点。而关于ownerDocument，它同样为null，因为文档节点就是整个文档的所有者。

接下来，我们需要理解文档document的子节点。在HTML文档中，最重要的子节点就是documentElement。这个属性始终指向html元素。我们可以通过以下代码来验证：

console.log(document.documentElement); // 这行代码会输出一个指向html元素的引用。

这意味着，当我们需要直接访问html元素时，可以直接使用这个元素，更快、更方便。document.documentElement提供了一个快速通道，让我们能够直接访问到HTML文档的根元素，这对于进行页面操作、样式修改或是事件绑定等操作都非常有用。

DOM元素中的`childNodes`列表，让我们一起深入了解每一个节点。下面的测试代码可以帮助我们更好地理解这个概念：

```javascript

console.log(document.documentElement); // 输出指向整个HTML文档的引用

console.log(document.childNodes[0]); // 输出文档的第一个子节点，通常是doctype声明

console.log(document.firstChild); // 输出文档的第一个子节点，与上述相同

console.log(document.firstChild === document.childNodes[0]); // 输出true，确认两者指向同一节点

console.log(document.body); // 输出指向HTML文档的body元素的引用

```

所有主流浏览器都支持`document.documentElement`和`document.body`属性，它们为我们提供了访问HTML文档根元素和主体内容的方式。

接下来，让我们关注另一个重要属性——`title`。通过这个属性，我们可以获取网页的标题，也可以设置网页的新标题。例如：

```javascript

console.log(document.title); // 输出当前网页的标题

document.title = "我是龙恩"; // 设置网页的新标题为“我是龙恩”

```

至于页面的完整URL，可以通过`document.URL`获取。而页面的域名则可以通过`document.domain`来访问。即使在跨域的情况下，只要设置相同的父域，就可以实现跨域操作。这对于某些web应用来说是非常有用的功能。

还有一个非常有用的方法是`namedItem()`。此方法可以通过元素的name特性从集合中获取特定的项。这在处理带有多个相同名称元素的HTML文档时尤其有用。例如：

```html

```

对应的JavaScript代码如下：

```javascript

var inputs = document.getElementsByTagName("input");

console.log(inputs.namedItem("aa")); // 输出名为"aa"的input元素

console.log(inputs["aa"]); // 同样输出名为"aa"的input元素，使用方括号语法访问

```

若想得到文档中所有的元素，可以调用`getElementsByTagName()`并传入空字符串或星号(``)作为参数。还有一个方法叫做`getElementsByName()`，它会返回带有给定name特性的所有元素。这也是HTMLDocument类型特有的方法。浏览器如IE、Firefox和Chrome都支持这些方法。至于Element节点，它有一些特征如nodeType、nodeName、nodeValue等。我们可以通过这些属性获取元素的详细信息。例如：

```html

``` 对应的JavaScript代码如下： ```javascript var test = document.getElementById("test"); console.log(test.tagName); // 输出DIV console.log(test.nodeName); // 输出DIV console.log(test.nodeValue); // 输出null console.log(test.parentNode); // 输出body元素 console.log(test.nodeType); // 输出1 ```理解HTML元素中的属性获取方法是非常重要的。所有HTML元素都由HTMLElement类型表示，该类型直接继承自Element类型。要获取HTML元素的属性，有几种方法可以使用： `getAttribute()`用于获取元素的属性值； `setAttribute()`用于设置元素的属性值； `removeAttribute()`用于删除元素的属性值等。还有一个名为attributes的属性，它是一个NamedNodeMap集合，包含了元素的所有属性节点。我们可以通过这个属性来操作元素的属性列表，如获取特定属性名对应的值等。这些方法和属性提供了操作HTML元素属性的强大工具集。希望你对DOM的这些特性有更深入的了解和应用！他们之间的关键差异在于removeNamedItem()方法的使用。此方法会删除指定的属性并返回被删除的节点表示。让我们通过一个具体的例子来深入理解这一点。

假设我们有以下的HTML代码：

`

`

对应的JavaScript代码如下：

```javascript

var div = document.getElementById("test");

var oldAttr = div.attributes.removeNamedItem("id");

console.log(oldAttr); // 输出：被删除的节点，其属性为 id="test"

```

在上述代码中，我们首先通过`document.getElementById`获取了具有特定ID的div元素。然后，我们使用`removeNamedItem`方法删除了"id"属性，该方法返回被删除的属性节点。当我们打印`oldAttr`时，输出应该是被删除的节点的属性，即`id="test"`。HTML结构变为：

`

`

值得注意的是，removeNamedItem()方法目前在IE，Firefox，和Chrome等主流浏览器中都被支持。

虽然我们有getAttribute(), setAttribute(), removeAttribute()等方法可以使用，但当我们需要遍历一个元素上的所有属性时，attributes对象的优势就体现出来了。例如，我们可以使用以下代码来输出一个元素的所有属性：

HTML代码仍为：

`

`

对应的JavaScript代码如下：

```javascript

var div = document.getElementById("test");

function outputAttributes(element) {

var arrs = []; // 创建一个数组来保存属性名-值对

var attrName, attrValue;

for(var i = 0, len = element.attributes.length; i < len; i++) {

attrName = element.attributes[i].nodeName; // 获取属性名

attrValue = element.attributes[i].nodeValue; // 获取属性值

arrs.push(attrName + "='" + attrValue + "'"); // 将名-值对添加到数组中

}

return arrs.join(" "); // 将数组中的元素以空格分隔符拼接起来

}

console.log(outputAttributes(div)); // 输出：id='test' class='testName' title='aa' data-value='test1'

```

深入了解IE7及更早版本的行为特性，它们会返回HTML元素中所有可能的特性，包括未明确指定的特性。针对IE7的这一特性，我们可以进行针对性的改进。每个特性节点都有一个名为“specified”的属性，如果其值为true，则表示该特性已在HTML中明确指定或通过setAttribute方法设置。在IE系列浏览器中，所有未设置特性的该属性值都为false。以下是一段示例代码：

```javascript

var div = document.getElementById("test");

function outputAttributes(element) {

var arrs = [];

var attrName, attrValue;

for (var i = 0, len = element.attributes.length; i < len; i++) {

attrName = element.attributes[i].nodeName;

attrValue = element.attributes[i].nodeValue;

if (element.attributes[i].specified) {

arrs.push(attrName + "='" + attrValue + "'");

}

}

return arrs.join(" ");

}

console.log(outputAttributes(div)); // 输出指定特性的列表

```

接下来，让我们深入理解元素的子节点。元素可以拥有任意数量的子节点和后代节点。元素的`childNodes`属性包含了其所有子节点，这些子节点可能是元素节点、文本节点、注释或处理指令等。不同浏览器的子节点数量可能有所不同。下面是一个简单的示例代码和演示内容：

```html

• 11
• 22
• 33

```

在标准浏览器（如IE9+，Firefox，Chrome）下，打印`list.childNodes`的长度是包含空格在内的总数。而在IE8及更早版本中，返回的只包含三个子元素节点。若要移除HTML元素中的所有空格并查看其子节点数量，您可以按照下面的方式操作：`

• 11
• 22
• 33

`。此时在所有浏览器中打印子节点的长度都为3。但为了避免编写时可能出现的误加空格问题，我们可以使用以下代码判断是否为元素节点并进行处理：

```javascript

var list = document.getElementById("list");

var arrs = [];

for (var i = 0, ilen = list.childNodes.length; i < ilen; i++) {

var curElement = list.childNodes[i];

if (curElement.nodeType === 1) { // 判断是否为元素节点

arrs.push(curElement);

}

}

console.log(arrs); // 输出真正的子元素节点列表

console.log(arrs.length); // 输出子元素数量 3

当我们谈及JavaScript中的事件，load事件无疑是其中最引人注目的一颗明星。当我们提及此事件时，意味着页面已经完全加载完毕，包括所有的图片、JavaScript文件、CSS文件等外部资源。今天，让我们再次聚焦于这个事件，深入理解其内涵并其实际应用。

一、什么是load事件？

在网页开发中，load事件是一个非常重要的浏览器事件。当浏览器完成一个页面的所有资源（包括图片、JavaScript脚本、CSS样式表等）的加载后，就会触发这个事件。换句话说，当用户可以正常浏览页面内容之前，所有需要加载的资源都已经加载完毕。

二、如何使用load事件？

在JavaScript中，我们可以通过监听load事件来确保某些代码在资源加载完成后执行。例如，我们可以将某些初始化代码放在window对象的load事件的回调函数中。这样，当页面完全加载完毕后，这些代码就会自动执行。如下所示：

```javascript

window.addEventListener('load', function() {

// 页面加载完毕后的代码

console.log('页面已完全加载');

});

```

三、为何使用load事件？

使用load事件的主要原因是确保在页面完全加载完成后再执行某些操作。例如，如果我们需要在页面加载完成后动态添加一些元素或者修改某些元素的内容，那么使用load事件就非常合适。因为只有在所有资源都加载完毕后，我们才能确保页面的DOM结构是完整的，从而进行准确的操作。

在Web开发中，我们经常需要等待页面上的某些元素或资源加载完成后执行特定的代码逻辑。在这个过程中，"load"事件扮演着关键的角色。让我们来如何使用JavaScript来监听和处理这个事件。

最常见的触发load事件的方式是直接绑定到``标签上，如``。这是一种直接而简单的方式，当整个页面内容（包括所有的框架、图片等）加载完成时，就会执行指定的函数。

除了这种方式，我们还可以使用JavaScript来动态绑定load事件。例如，使用EventUtil工具库中的addHandler方法来处理这个事件。这在某些情况下更为灵活和方便。

EventUtil是一个包含了各种常用事件处理方法的集合，其中的addHandler方法允许我们轻松地为元素绑定事件。使用此方法时，我们需要提供元素对象、事件类型和事件处理函数作为参数。

而在现代Web开发中，动态加载资源变得越来越常见。当我们动态地加载一个外部的JavaScript文件时，如何判断这个文件是否已经加载完成呢？我们可以利用script元素的load事件来监听。当脚本加载完成时，会触发这个事件。我们可以为script元素添加load事件处理程序，然后在事件触发时执行相应的逻辑。

值得注意的是，不同的浏览器在处理资源加载事件时可能会有所不同。特别是Internet Explorer（IE），它提供了一些特有的事件和方法来处理资源的加载状态变化。例如，IE为`