DOM

最新推荐文章于 2022-06-14 17:09:32 发布

MaterialCoder

最新推荐文章于 2022-06-14 17:09:32 发布

阅读量196

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/github_39673115/article/details/76549131

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1. 节点类型nodeType

1 element（元素）
2 attribute（属性）
3 text（文本）
8 comment（注释）
9 document

2. 节点关系

childNodes 访问元素的子节点，其中保存着一个NodeList对象，它是一种类数组对象。将NodeList转换为数组：

function convertToArray(nodes) {
    var array = null;
    try {
        array = Array.prototype.slice.call(nodes,0);
    } catch (ex) {
        array = new Array();
        for(var i = 0, len = nodes.length; i < len; i++) {
            array.push(nodes[i]);
        }
    }
    return array;
}

parentNode 指向文档树中的父节点
previousSibling 访问节点的上一个同胞（兄弟）节点
nextSibling 访问节点的下一个同胞（兄弟）节点
firstChild 指向childNodes列表中的第一个子节点
lastChild 指向childNodes列表中的最后一个子节点，只有一个节点的情况下，firstChild和lastChild指向同一个节点，如果没有子节点，则均为null
ownerDocument 指向表示整个文档的文档节点
hasChildNodes() 在节点包含一个或多个子节点的情况下返回true

（以下属性返回的元素都不包含空白文本节点）
childElementCount 返回子元素（不包括文本节点和注释）的个数
firstElementChild 指向第一个子元素
lastElementChild 指向最后一个子元素
previousElementSibling 指向前一个同辈元素
nextElementSibling 指向后一个同辈元素
children 指向元素中同样还是元素的子节点

contains(node) 被检测的节点是不是该节点的后代。接收一个参数，即要检测的后代节点，是返回true，否则返回false

3. 操作节点

appendChild(someNode) 向childNodes的末尾添加一个节点，如果传入到appendChild()中的节点已经是文档的一部分了，那结果就是将该节点从原来的的位置移到新位置
insertBefore(newNode, someNode) 在某个特定的位置之前插入节点，接收两个参数，分别是要插入的节点和作为参考的节点，如果参照节点是null，那么insertBefore()和appendChild()执行相同的操作
replaceChild(newNode, replaceNode) 替换某个指定的节点。接收两个参数，分别是要插入的节点和要替换的节点
removeNode(someNode) 移除某个节点。

cloneNode() 复制某个节点。接收一个布尔值，表示是否进行深复制。参数为true，执行深复制，即复制节点及其整个子节点树；参数为false，执行浅复制，只复制节点本身
normalize() 处理文档树种的文本节点。如果在包含两个或多个文本节点的父元素上调用normalize()方法，则会将所有文本节点合并成一个节点

4. 文档子节点和文档信息

document.documentElement 取得对<html>的引用
document.body 取得对<body>的引用
document.doctype 取得对<!DOCTYPE>的引用（浏览器对其的支持差别很大）

document.title 取得文档的标题
document.URL 取得完整的URL
document.domain 取得域名
document.referrer 取得链接到当前页面的那个页面的URL

5. 查找元素

document.getElementById() 通过元素的ID查找，唯一性
document.getElementsByTagName() 通过标签名
document.getElementsByName() 通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)，只用HTMLDocument类型才有

（扩展）
querySelector() 接收一个CSS选择符，返回与该选择符匹配的第一个元素
querySelectorAll() 接收一个CSS选择符，返回所有匹配的元素，返回的是一个NodeList的实例
matchesSelector() 接收一个CSS选择符，如果调用元素与该选择符匹配，返回true，否则，返回false。（大多数浏览器还不支持，需要加前缀ms/moz/webkit才支持）
getElementsByClassName() （HTML5新增）通过类名查找，可以接收一个或多个类名

6. 取得特性

getAttribute() 获得特性，一个参数，要获取的特性名
setAttribute() 设置特性，两个参数，要设置的特性名和值
removeAttribute() 删除特性

7. 创建元素

document.createElement() 创建新元素，接收一个参数，即要创建元素的标签名
document.createTextNode() 创建新文本节点，接收一个参数，即要插入节点的文本
document.createDocumentFragment() 创建文档片段，文档片段是一种“轻量级”的文档，可以包含和控制节点，但不会像完整文档那样占用额外的资源

8. 其他

classLists HTML5新增，一种操作类名的方式，可以获得元素类名的集合
document.activeElement 指向DOM中当前获得了焦点的元素，文档加载期间为null，文档加载完成后保存的是document.body中的元素的引用
document.hasFocus() 用于确定文档是否获得了焦点
document.readyState 有两个可能的值，loading（正在加载文档）和complete（已经加载完文档），通常通过它来实现一个指示文档已经加载完成的指示器
document.compatMode 告诉开发人员浏览器采用了那种渲染模式。在标准模式下，它的值为“CSS1Compat”，而在混杂模式下，它的值为“BackCompat”
document.head HTML新增，引用文档的<head>元素
dataset HTML5规定可以为元素添加非标准的属性，但要添加前缀data-。通过dataset可以来访问自定义的属性的值，如:

<div data-appId="1234"></div>

var appid = div.dataset.appId;

innerHTML 返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的HTML标记
outerHTML 返回调用它的元素及所有子节点的HTML标签
innerText 元素中包含的所有文本的内容，包括自文档树中的文本。它会过滤掉HTML标签，将其转化为文本。如：

<div id="content">Hello World!</div>

div.innerText = "Hello & welcome, <b>\"reader\"!</b>";
//会变成
<div id="content">Hello &amp; welcome, &lt;b&bt;&quot;reader&quot;!&lt;b&bt;&quot;</div>

outerText 除了作用范围扩大到了包围调用它的节点之外，与innerText没有多大区别