DOM扩展

最新推荐文章于 2024-05-11 00:30:00 发布

自由2017

最新推荐文章于 2024-05-11 00:30:00 发布

阅读量1.1k

点赞数

分类专栏： js 文章标签： DOM扩展

本文链接：https://blog.csdn.net/liujie19901217/article/details/50971179

版权

js 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

选择符API

querySelector()方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。
这里特别注意：该方法的参数是一个CSS选择符。注意和getElementById() 方法以及getElementsByTagName()方法的区别。
为 <div> 元素中的第一个有 target 属性的 <a> 元素添加红色边框：

var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";

如果要为所有含有target属性的<a>元素添加红色边框：使用querySelectorAll()方法

var x = document.getElementById("myDIV");
x.querySelectorAll("a[target]").style.border = "10px solid red";

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>选择符API</title>
    </head>
    <body>
    <ul>
        <li>Frist item</li>
        <li class="selected">Second item</li>
        <li>Third item</li>
    </ul>
    <script type="text/javascript">
    //取得body元素
    var body=document.querySelector("body");
    console.log(body);//<body>
    //取得id为"myDiv"的元素
    var myDiv=document.querySelector("#myDiv");
    console.log(myDiv);// null
    //取得类为"selected"的第一个元素
    //Document类型调用querySelector(),会在文档元素范围内查找匹配的元素
    var selected=document.querySelector(".selected");
    console.log(selected.innerHTML);//Second item
    //Element元素类型调用querySelector(),会在该元素范围内查找匹配的元素，即body元素
    var img = document.body.querySelector("img.button");
     console.log(img);//null
    </script>
    </body>
</html>

querySelectorAll()方法接收的参数与querySelector()方法一样，都是一个CSS选择符，但querySelectorAll()是返回所有匹配的元素，是一个NodeList对象
要取得返回的NodeList中的每一个元素，可以使用item()方法，也可以使用方括号语法

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>querySelectorAll</title>
        <style type="text/css">
        .important{background: red;font-weight: bold;}
        </style>
    </head>
    <body>
    <div id="myDiv">
        <h1>HTML Ipsum Presents</h1>
        <p><strong>Pellentesque </strong> senectus et <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo.  <code>commodo vitae</code>, ornare sit  <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
        <h2>Header Level 2</h2>
        <ol>
           <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
           <li>Aliquam tincidunt mauris eu risus.</li>
        </ol>
        <blockquote><p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. turpis elit sit amet quam.</p></blockquote>
        <h3>Header Level 3</h3>
        <ul>
           <li>Lorem ipsum dolor </li>
           <li>Aliquam tincidunt mauris eu risus.</li>
        </ul>
    </div>
    <script type="text/javascript">
        if (document.querySelectorAll){
            //获取id为myDiv的div中的所有em元素
            var ems = document.getElementById("myDiv").querySelectorAll("em");
            console.log(ems.length);//1

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

            //取得所有<p>元素中的所有<strong>元素
            var strongs = document.querySelectorAll("p strong");
            console.log(strongs.length);//2
            //取得NodeList中的元素，可以使用item()方法或者方括号语法
            for(var i=0;i<strongs.length;i++){
                console.log(strongs[i]);//或者使用strongs.item(i);
                strongs[i].className='important';
            }
        } else {
            alert("Selectors API not supported in this browser");
        }
    </script>
    </body>
</html>

matchesSelector()方法接收一个参数即CSS选择符，如果调用元素和选择符匹配则返回true

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>matchesSelector</title>
    </head>
    <body class="myBody">
    <script type="text/javascript">
    function matchesSelector(element,selector){
        if(element.matchesSelector){
            return element.matchesSelector(selector);
        }else if(element.msMatchesSelector){//IE
            return element.msMatchesSelector(selector);
        }else if(element.mozMatchesSelector){//FF
            return element.mozMatchesSelector(selector);
        }else if(element.webkitMatchesSelector){//Chrome
            return element.webkitMatchesSelector(selector);
        }else{
            alert("浏览器不支持matchesSelector");
        }
    }
     if (matchesSelector(document.body, "body.myBody")){
            alert("It's myBody");//会弹出It's myBody
        }
    </script>
    </body>
</html>

元素遍历

childElementCount：返回子元素(不包括文本节点和注释)的个数
fristElementChild：指向第一个子元素，fristChild的元素版
lastElementChild：指向最后一个子元素，lastChild的元素版
previousElementSibling：指向前一个同辈元素； previousSibling的元素版
nextElementSibling：指向前一个同辈元素； nextSibling的元素版
利用这些属性，不必担心空白文本节点，可以方便的查找DOM元素了

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>元素遍历</title>
    </head>
    <body>
    <h1>HTML Ipsum Presents</h1>
        <p><strong>Pellentesque</strong> senectus et netus <em>Aenean</em> Mauris placerat eleifend leo. <code>commodo vitae</code>Aenean fermentum<a href="#">Donec non enim</a> in turpis</p>
        <h2>Header Level 2</h2>
        <ol>
           <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
           <li>Aliquam tincidunt mauris eu risus.</li>
        </ol>
        <blockquote><p>Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Vivamus magna. </p></blockquote>
        <h3>Header Level 3</h3>
        <ul>
           <li>Lorem ipsum dolor sit amet</li>
           <li>Aliquam tincidunt mauris eu risus.</li>
        </ul>
    <h1>All Children of &lt;body&gt;:</h1>
    <div></div>
    <script type="text/javascript">
    //firstElementChild是第一个元素子节点和firstChild是第一个子节点，注意区别
        if (document.body.firstElementChild){
        //document.body.firstElementChild是body元素的第一个元素子节点
                var i,
                len,
                child = document.body.firstElementChild;
            while(child != document.body.lastElementChild){
                console.log("<p>" + child.tagName + "</p>");
                child = child.nextElementSibling;//获取当前子节点的下一个同辈元素
            }
        } else {
            document.write("<p>Element Traversal API not supported.</p>");
        }
        console.log(document.body.lastElementChild.tagName);//SCRIPT
    </script>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>元素遍历</title>
    </head>
    <body>
    <ul id="myList">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <input type="button" value="计算子节点数" onclick="countChildren()">
    <script type="text/javascript">
        function countChildren(){
            var ul = document.getElementById("myList");
            console.log("children.length="+ul.children.length);   //3 in all browsers
            for(var i=0,len=ul.children.length;i<len;i++){
                console.log(ul.children[i]);//返回3个li元素节点
            //注意children和childNodes区别：children只返回包含元素中的元素子节点
            //childNodes会返回空白文本节点和子元素节点，除此之外两者没有区别
            }
            console.log("childNodes.length="+ul.childNodes.length);
            // 7 返回4个空白文本节点和3个li元素节点
        }
    </script>
    </body>
</html>

HTML5与类相关的扩充

getElementsByClassName()方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的NodeList

    <script type="text/javascript">
       //取得所有类中包含"username"和"current"的元素，类名的先后无所谓
       var all=document.getElementsByClassName("username current");
       //取得id为myDiv的元素中带有类名"selected"的所有元素
       var selected=document.getElementById("myDiv").getElementsByClassName("selected");
    </script>

HTML5新增了一种操作类名的方法，为所有元素添加了classList属性
这个新类型定义了如下方法：

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>classList Example</title>
    <style>
        .highlight {
            background: yellow;
        }
    </style>
</head>
<body>
    <div id="myDiv" class="init">Hello world!</div>
    <input type="button" value="Add class" onclick="addClass()">
    <input type="button" value="Remove class" onclick="removeClass()">
    <input type="button" value="Toggle class" onclick="toggleClass()">
    <input type="button" value="Contains class?" onclick="containsClass()">
    <p>This demo works in Firefox 3.6 and Chrome 8.</p>
    <script type="text/javascript">
        function addClass(){//添加类名
            var myDiv = document.getElementById("myDiv");
            myDiv.classList.add("highlight");//class="init highlight"
        }

        function removeClass(){//删除类名
            var myDiv = document.getElementById("myDiv");
            myDiv.classList.remove("highlight");
        }

        function toggleClass(){
            var myDiv = document.getElementById("myDiv");
            myDiv.classList.toggle("highlight");//toggle()方法：如果已经存在给定的class则删除，不存在则添加
        }

        function containsClass(){//检测是否包含类名
            var myDiv = document.getElementById("myDiv");
            alert(myDiv.classList.contains("highlight"));//false
        }
    </script>
</body>
</html>

HTML5焦点管理

HTML5添加了辅助管理DOM焦点的功能。新增的document.activeElement属性始终会引用DOM中当前获得了焦点的元素。
元素获取焦点的方式：页面加载、用户输入和在代码中调用focus()方法
新增了document.hasFocus()方法，这个方法用于确定文档是否获得了焦点

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>焦点管理</title>
    </head>
    <body>
    <button id="myBtn">点击</button>
    <script type="text/javascript">
        var btn=document.getElementById("myBtn");
        btn.focus();
        //console.log(document.activeElement===btn);//true
        console.log(document.hasFocus());//true
    </script>
    </body>
</html>

HTMLDocument的变化

兼容模式

compatMode属性告诉开发人员浏览器采用了哪种渲染模式
在标准模式下，document.compatMode的值为”CSS1Compat”
在混杂模式下，document.compatMode的值为”BackCompat”

<script type="text/javascript">
        if(document.compatMode=="CSS1Compat"){
            alert("标准模式");
        }else{
            alert("混杂模式");
        }
    </script>

readyState属性

document对象的引入了readyState属性
document.readyState的有两个：
loading:正在加载文档
complete：已经加载完毕文档

head属性

HTML5新增了document.head属性引用文档的元素
使用一下兼容写法：
var head=document.head||document.getElementsByTagName(“head”)[0];

插入文本

innerHTML属性

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>innerHTML属性</title>
    </head>
    <body>
    <div id="content">
        <p>This is a <strong>paragraph</strong> with a list following it.</p>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
    <script type="text/javascript">
            var div = document.getElementById("content");
            alert(div.innerHTML);
            /*
            div.innerHTML返回div中所有子节点(包括元素、注释和文本节点)对应的HTML标记
            返回结果：
        <p>This is a <strong>paragraph</strong> with a list following it.</p>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
             */
        //如果设置的值仅仅是文本而没有HTML标签，那么结果就是设置纯文本
        div.innerHTML="Hello innerHTML属性";
        //这个带有HTML标签
        //div.innerHTML="<h1>Hello innerHTML属性</h1>";
    </script>
    </body>
</html>

outerHTML属性

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>outerHTML属性</title>
    </head>
    <body>
       <div id="content">
        <p>This is a <strong>paragraph</strong> with a list following it.</p>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
    <script type="text/javascript">
            var div = document.getElementById("content");
            alert(div.outerHTML);
            /*
            <div id="content">
        <p>This is a <strong>paragraph</strong> with a list following it.</p>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
             */
             div.outerHTML="<p>Hello outerHTML属性</p>";
             //这样设置会使得p标签替换DOM树中的div元素以及它的子元素
    </script>
    </body>
</html>

innerText属性

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>innerText属性</title>
    </head>
    <body>
    <div id="box">
        <p>我是一个段落</p>
        <ul>
            <li>哈哈</li>
            <li>呵呵</li>
            <li>嘿嘿</li>
        </ul>
    </div>
    <script type="text/javascript">
    var oDiv=document.getElementById("box");
    alert(oDiv.innerText);//结果如下
    /*
    我是一个段落

哈哈
呵呵
嘿嘿
     */
    //使用innerText属性设置这个div元素的内容
    //通过设置innerText属性移除了先前存在的所有子节点，完全改变了DOM子树
    oDiv.innerText="Hello innerText";
    //执行后变为
    //<div id="box">Hello innerText</div>
    </script>
    </body>
</html>

outerText属性

除了作用范围扩大到了包含调用它的节点之外，其他的与innerText属性基本没有多大区别。在读取文本值是，两者的结果完全一样。但是在写模式下，outerText属性不只是替换调用它的元素的子节点，而是会替换整个元素(包括子节点)。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>outerText属性</title>
    </head>
    <body>
    <div id="box">
        <p>我是一个段落</p>
        <ul>
            <li>哈哈</li>
            <li>呵呵</li>
            <li>嘿嘿</li>
        </ul>
    </div>
    <script type="text/javascript">
         var oDiv=document.getElementById("box");
       alert(oDiv.outerText);//结果如下
    /*
    我是一个段落

哈哈
呵呵
嘿嘿
     */
    //使用outerText属性设置这个div元素的内容
    oDiv.outerText="Hello outerText";
    //执行后变为Hello innerText
    //div元素以及它的子元素全部被替换
    </script>
    </body>
</html>

textContent属性

textContent属性是DOM3级规定的一个属性，现代大部分浏览器都支持这个属性，它的作用类似于innerText属性。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>textContent属性</title>
    </head>
    <body>
    <div id="content">
        <p>This is a <strong>paragraph</strong> with a list following it.</p>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
    <input type="button" value="Get InnerText" onclick="getInnerText()">
    <script type="text/javascript">
        function getInnerText(){
            var div = document.getElementById("content");
            alert(div.textContent);
        }
    </script>
    </body>
</html>