JavaScript DOM扩展

痛定思痛。 2023-02-12 05:40 27阅读 0赞

## 选择符API ##

1、querySlector()方法

querySlector()方法接受一个CSS选择器，返回与该模式匹配的第一个元素。通过Document类型调用querySlector()方法时，会在文档元素的范围内查找匹配的元素。而通过Element类型调用querySlector()方法时，只会在该元素的范围内查找匹配的元素。

//取得body元素
                var body = document.querySelector("body");
    
                //取得ID为“mydiv”的元素
                var myDiv = document.querySelector("#mydiv");
    
                //取得类为 "selected"的第一个元素
                var selected = document.querySelector(".selected");
    
                //取得button元素的第一个图像
                var img = document.body.querySelector("img.button");

2、querySelectorAll()方法

querySelectAll()方法接受的参数与querySelect()方法一样都是一个CSS选择符，但querySelectAll()方法返回的是一个NodeList的实例，不仅仅是一个元素，而是所有匹配到的都会在NodeList中。只要querySelectAll()方法的CSS选择符有效，该方法都会返回一个NodeList对象，不管匹配到多少元素，就算是空的，也会返回一个Nodelist。

//取得所有类为 "selected"的元素
    var selected = document.querySelectorAll(".selected");

3、matchesSelector()方法

Element类型新增的一个方法matchesSelector()，接受一个CSS选择符为参数，如果调用元素与该选择符匹配，返回true；否则返回false。

if(document.body.matchesSelctor("body.page1")){ 
         //true
    }

--------------------

## 与类相关的扩充 ##

**classList属性**  
为所有元素添加classList属性。它自己有一个表示自己包含多少元素的属性，取得每个元素可以使用item()方法，也可以使用方括号语法。此外还有如下方法：

**add(value)：将给定的字符串值添加到列表中，如果值已经存在，就不添加了。  
contains(value)：表示列表中是否存在给定的值，如果存在就返回true，否则返回flase。  
remove(value)：从列表中删除给定的字符串。  
toggle(value)：如果列表中已经存在给定的值，则删除它；如果列表中没有给定的值，则添加它。**

**支持chrome和Firfox 3.6和IE10以上。**

//向div元素中添加div类
                div.classList.add("div")
                    //检查div类
                div.classList.contains("div")
                    //删除div类
                div.classList.remove("div")
                    // 切换div类
                div.classList.toggle("div")
    
                // 迭代类名
                for (var i = 0; i < div.classList.length; i++) { 
                    console.log(div.classList[i]);
                }

--------------------

## 焦点管理 ##

document.activeElement属性，这个属性始终会引用DOM中当前获得焦点的元素。元素获取焦点的方式有页面加载，用户输入（通常是按Tab键）,和代码汇总调用focus()方法。

默认情况下，文档刚刚加载完成时，document.activeElement中保存的是document.body元素的引用。文档加载期间，document.activeElement的值为null。

另外就是新增了document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。

--------------------

## HTMLDocument的变化 ##

**1、readyState属性**

它有两个可能的值

*  loading，正在加载文档
 *  complete，已经加载完文档

使用document.readyState的最恰当方式，就是通过它来实现一个指示文档已经加载完成的指示器。用法如下：

if(document.readyState =="complete"){ 
                    // 执行操作
                }

**2、兼容模式**

这个属性是为了告诉开发人员浏览器采用的哪种渲染模式。

if (document.compatMode == "CSS1Compat") { 
                    alert("Standards mode"); //标准模式
                } else { 
                    alert("Quirks mode") //混杂模式
                }

--------------------

**3、head属性**  
引用文档的<head>元素，可以结合使用这个属性和另一种后备方法。

var head = document.head || document.getElementsByTagName("head")[0];
    //如果有head属性就使用，否则仍然使用document.getElementsByTatName("head")[0];

--------------------

## 字符集属性 ##

charset属性表示文档中实际使用的字符集，也可以直接设置。

document.charset

--------------------

## 插入标记 ##

**1、innerHTML属性**

在读模式下，innerHTML属性返回与调用元素的所有子节点（包括元素，注释和文本节点）和对应的HTML标记。在写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。

不是所有的元素都支持innerHTML属性。不支持innerHTML的元素有：<col>、<colgroup>、<frameset>、<head>、<html>、<style>、<tbody>、<thead>、<tfoot>、<tr>，在IE8及更早的版本中，<title>元素也没有innerHTML属性。

**2、outerHTML属性**

在读模式下，outerHTML属性返回调用它的元素所有子节点的HTML标签，在写模式下，outerHTML根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素。

div.outerHTML = "<p>aqing</p>";
                //上面的效果和下面的一样
    
    
    
                var p = document.createElement("p");
                p.appendChild(document.createTextNode("<p>aqing</p>"));
                div.parentNode.replaceChild(p, div);

**3、insertAdjacentHTMl()方法**

它接收两个参数：**插入的位置**和**要插入的HTML文本**。第一个参数必须是下列值之一：

“beforebegin”，在当前元素之下插入一个紧邻的同辈元素；  
“afterbegin”，在当前元素之下插入一个新的子元素或在第一个子元素之前在插入新的子元素；  
“beforeend”，在当前元素之下插入一个新的子元素或在最后一个子元素之后在插入新的子元素；  
“afterend”，在当前元素之后插入一个紧邻的同辈元素；

div.insertAdjacentHTML("beforeBegin", "<p>aqing</p>")
                 div.insertAdjacentHTML("afterEnd", "<p>aqing</p>")
                 div.insertAdjacentHTML("afterBegin", "<p>aqing</p>")
                 div.insertAdjacentHTML("beforeEnd", "<p>aqing</p>")

**4、innerText属性**

通过innerText 属性可以操作元素中包含所有文本内容，包括子文档树中的文本。通过innerText 读取值时，他会按照由浅入深的顺序，将子文档树中的所有文本拼接起来。再通过innerText 写入值时，结果会删除所有子节点，插入包含响应文本值的文本节点。

div.innerText = div.innerText;

执行这行代码后，就用原来的文本内容替换了容器中的所有内容（包含子节点，因而也就去掉了HTML标签）。

**5、outerText 属性**

除了作用范围变大到了包含调用它的节点之外，outerText与innerHTML 基本只上没有多大的区别。  
在读取文本值时，结果完全一样。但在写模式下，outerText 就完全不同了：outerText 不只是替换调用它的元素子节点，而是会替换整个元素（包括子节点）。  
**由于这个属性会导致调用它的元素不存在，因此并不常用。**

--------------------

## scrollIntoView()方法 ##

滚动页面，可以在所有HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。

div.scrollIntoView();

--------------------

## contains()方法 ##

调用contains()方法的应该是祖先节点，也就是搜索开始的节点，这个方法接收一个参数，即要检测的后代节点。如果被检测到的节点是后代节点，该方法返回true，否则返回false

console.log(document.documentElement.contains(document.body));
                // true

测试<body>元素是不是<html>元素的后代。

--------------------

愿你的坚持终有收获。