首页 > 代码库 > DOM元素对象的属性和方法(1)

DOM元素对象的属性和方法(1)

一、accessKey()

  作用:获取元素焦点快捷键;设置快捷键后,使用Alt+快捷键,让元素快速获得焦点,

<!DOCTYPE html>
<html>
<head>
    <title>element.accesskey</title>
    <meta charset="utf-8">
</head>
<body>
    <input type="text" id="text">
    <script type="text/javascript">
        var text=document.getElementById("text");
        text.accessKey="z";
        console.info("text元素的快捷键:"+text.accessKey);
    </script>
</body>
</html>

 

结果:技术分享技术分享

二、addEventListener()

  作用:为元素添加事件句柄

<!DOCTYPE html>
<html>
<head>
    <title>element.addEventListener</title>
    <meta charset="utf-8">
</head>
<body>
    <input type="text" id="text" value="默认文本">
    <button id="show">未点击</button>
    <script type="text/javascript">
        var text=document.getElementById("text");
        var button=document.getElementById("show");
        button.addEventListener("click",function(){text.value="按钮点击后文本";this.innerHTML="点击过";},false);
    </script>
</body>
</html>

结果:技术分享技术分享

三、appendChild()

  作用:在元素尾部追加新元素

<!DOCTYPE html>
<html>
<head>
    <title>element.appendChild()</title>
    <meta charset="utf-8">
</head>
<body>
    <ul id="ul">
        <li>第一个元素</li>
        <li>第二个元素</li>
    </ul>
    <button id="button">添加新的li元素</button>
    <script type="text/javascript">
        var ul=document.getElementById("ul");
        var button=document.getElementById("button");
        var newLi;
        button.addEventListener("click",
            function(){newLi=document.createElement("li");
            newLi.innerHTML="新元素";
            ul.appendChild(newLi);
        });
    </script>
</body>
</html>

结果:技术分享技术分享

四、attributes

  作用:返回元素属性数组

<!DOCTYPE html>
<html>
<head>
    <title>DOM元素对象——>attribute:返回元素属性数组</title>
    <meta charset="utf-8">
</head>
<body>
    <a title="标题" href="#" rel="提示" id="ID">链接</a>
    <script type="text/javascript">
        var id=document.getElementById("ID");
        var idAtts=id.attributes;
        console.log("Length="+idAtts.length);
        for(var i=0;i<idAtts.length;i++){
            console.log(idAtts[i]);
        }
    </script>
</body>
</html>

结果:技术分享

五、childNodes

  作用:返回元素下子节点的数组,特别注意,属性不算节点

 

<!DOCTYPE html>
<html>
<head>
    <title>childNodes</title>
    <meta charset="utf-8">
</head>
<body>
    <div id="box"><div class="one" id="two"></div>文本节点<!--注释节点--></div>
    <script type="text/javascript">
        var box = document.getElementById("box");
        var child = box.childNodes;
        var ele=0,comment=0,text=0,att=0;
        console.log(child.length);
        for(var i=0;i<child.length;i++){
            if(child[i].nodeType==1){
                ele++;
            }
            if(child[i].nodeType==2){
                att++;

            }
            if(child[i].nodeType==3){
                text++;
            }
            if(child[i].nodeType==8){
                comment++;
            }
            console.log(child[i].nodeName);
        }
        console.log("元素节点:"+ele+",属性节点:"+att+",文本节点:"+text+",注释节点:"+comment);
    </script>
</body>
</html>

结果:技术分享

六、className

  作用:设置或返回元素class值

七、clientHeight

  作用:返回在页面上返回内容的可视高度(不包括边框,边距或滚动条)

八、clientWidth

  作用:返回在页面上返回内容的可视宽度(不包括边框,边距或滚动条)

九、cloneNode

  作用:克隆节点并返回副本

<!DOCTYPE html>
<html>
<head>
    <title>cloneNode</title>
    <meta charset="utf-8">
    <style type="text/css">
        .one{
            border:1px solid red;
        }
        .two{
            color:blue;
        }
    </style>
</head>
<body>
    <ul id="one">
        <li class="one">文本节点0</li>
        <li class="two">文本节点1</li>
    </ul>
    <ul id="two">
        
    </ul>
    <script>
        var lis=document.getElementById("one").getElementsByTagName("li");
        var two=document.getElementById("two");
        var clone=lis[0].cloneNode(false);
        two.appendChild(clone);
        var clone1=lis[1].cloneNode(true);
        two.appendChild(clone1);
    </script>
</body>
</html>

结果:技术分享

十、compareDocumentPosition

  作用:判断元素同参数对象的位置关系,返回关系值(num)

<!DOCTYPE html>
<html>
<head>
    <title>cloneNode</title>
    <meta charset="utf-8">
    
</head>
<body>
    <ul id="one">
        <li class="one" rel="提示">文本节点0</li>
        <li class="two">文本节点1</li>
    </ul>
    <ul id="two">
        
    </ul>
    <script>
        var newLi=document.createElement("li");
        var one=document.getElementById("one");
        var lis=one.getElementsByTagName("li");
        var att=lis[0].attributes;
        var two=document.getElementById("two");
        console.log(lis[0].compareDocumentPosition(lis[1])+",元素在参数元素之前");
        console.log(lis[1].compareDocumentPosition(lis[0])+",元素在参数对象之后");
        console.log(lis[0].compareDocumentPosition(one)+",元素在参数元素之后,且元素在参数元素的内部");
        console.log(one.compareDocumentPosition(lis[0])+",元素在参数元素之前,且参数元素在元素内部");
        console.log(one.compareDocumentPosition(newLi)+",没有关系,且不在同一个文档");
        console.log(att[0].compareDocumentPosition(att[1])+",没有关系,但在同一个文档");
    </script>
</body>
</html>

结果:技术分享

DOM元素对象的属性和方法(1)