JavaScript -- 时光流逝（十一）：DOM -- Docume…

2018-11-09 02:36:19来源：博客园阅读 ()

JavaScript -- 知识点回顾篇（十一）：DOM -- Document 对象

(1) document.activeElement: 返回文档中当前获得焦点的元素。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    function my_activeElement() {
        var x = document.activeElement.tagName;
        document.getElementById("myInfo").innerHTML = x;
    }
</script>
</head>
<body>
    <div onclick="my_activeElement()">
        <input type="button" value="按钮1">
        <button>按钮2</button>
    </div>
    <div id='myInfo'></div>
</body>
</html>

(2) document.addEventListener(): 用于向文档添加事件句柄。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    document.addEventListener("click", function(){
        document.getElementById("myInfo").innerHTML = "China";
    });
</script>
</head>
<body>
    <div id='myInfo'>I come from </div>
</body>
</html>

(3) document.baseURI: 返回文档的绝对基础 URI

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    function my_baseURI(){
        var x=document.getElementById("myInfo").innerHTML=document.baseURI;
    }
</script>
</head>
<body>
    <input type="button" value="按钮" onclick="my_baseURI()">
    <div id='myInfo'></div>
</body>
</html>

(4) document.body: 返回文档的body元素

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    function my_body() {
        document.body.style.backgroundColor = "yellow";
    }
</script>
</head>
<body>
    <input type="button" value="按钮" onclick="my_body()">
    <div id='myInfo'></div>
</body>
</html>

(5) document.cookie: 设置或返回与当前文档有关的所有 cookie。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    document.write(document.cookie);
</script>
</head>
<body>
</body>
</html>

(6) document.createAttribute(): 用于创建一个指定名称的属性，并返回Attr 对象属性

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    function my_createAttribute(){
        var att=document.createAttribute("class");
        att.value="divclass";
        document.getElementById("myInfo").setAttributeNode(att);
    }
</script>
<style type="text/css">
    .divclass{
        background-color:yellow;
    }
</style>
</head>
<body>
    <input type="button" value="按钮" onclick="my_createAttribute()">
    <div id='myInfo'>hello</div>
</body>
</html>

(7) document.createComment(): createComment() 方法可创建注释节点。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    function my_createComment(){
        var c=document.createComment("这是我添加的注释");
        document.body.appendChild(c);
    }
</script>
</head>
<body>
    <input type="button" value="按钮" onclick="my_createComment()">
    <div id='myInfo'>hello China</div>
</body>
</html>

(8) document.createDocumentFragment(): 创建空的 DocumentFragment 对象，并返回此对象。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    function my_createDocumentFragment(){
        var d=document.createDocumentFragment();
        d.appendChild(document.getElementsByTagName("LI")[0]);
        d.childNodes[0].childNodes[0].nodeValue="XXXX";
        document.getElementsByTagName("UL")[0].appendChild(d);
    }
</script>
</head>
<body>
    <ul><li>AAA</li><li>BBB</li></ul>
    <ul><li>CCC</li><li>DDD</li></ul>
    <input type="button" value="按钮" onclick="my_createDocumentFragment()">
</body>
</html>

(9) document.createElement(): 通过指定名称创建一个元素。

document.createTextNode(): 创建文本节点。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    function my_create(){
        var btn=document.createElement("BUTTON");
        var t=document.createTextNode("新创建的按钮");
        btn.appendChild(t);
        document.body.appendChild(btn);
    }
</script>
</head>
<body>
    <input type="button" value="按钮" onclick=" my_create()">
</body>
</html>

(10) document.doctype: 返回与文档相关的文档类型声明 (DTD)。
document.documentElement: 返回文档的根节点
document.documentMode: 返回用于通过浏览器渲染文档的模式
document.documentURI: 设置或返回文档的位置
document.domain: 返回当前文档的域名。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    function my_Test(){
        document.getElementById('myInfo').innerHTML='doctype.name的值是: '+document.doctype.name+'<br/>';
        document.getElementById('myInfo').innerHTML+='documentElement.nodeName的值是: '+document.documentElement.nodeName+'<br/>';
        document.getElementById('myInfo').innerHTML+='document.documentMode的值是: '+document.documentMode+'<br/>';
        document.getElementById('myInfo').innerHTML+='document.documentURI的值是: '+document.documentURI+'<br/>';
        document.getElementById('myInfo').innerHTML+='document.domain的值是: '+document.domain+'<br/>';
    }
</script>
</head>
<body>
    <input type="button" value="按钮" onclick="my_Test()">
    <div id='myInfo'></div>
</body>
</html>

(11) document.getElementsByClassName(): 返回文档中所有指定类名的元素集合，作为 NodeList 对象。
　　 document.getElementById(): 返回对拥有指定 id 的第一个对象的引用。
　　 document.getElementsByName(): 返回带有指定名称的对象集合。
　　 document.getElementsByTagName(): 返回带有指定标签名的对象集合。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    function my_Test(){
        document.getElementById('myInfo').innerHTML=document.getElementsByClassName("myclassName")[0].innerHTML+'<br/>';
        document.getElementById('myInfo').innerHTML+=document.getElementById('myid').innerHTML+'<br/>';
        document.getElementById('myInfo').innerHTML+=document.getElementsByName("myName")[0].value+'<br/>';
        document.getElementById('myInfo').innerHTML+=document.getElementsByTagName("P")[0].innerHTML+'<br/>';
    }
</script>
</head>
<body>
    <div class="myclassName">myclassName</div>
    <div id='myid'>myid</div>
    <input type="button" name="myName" value="myName按钮" >
    <p>P元素</p>

    <hr/>
    <input type="button" value="按钮" onclick="my_Test()">
    <div id='myInfo' style="background-color:yellow"></div>
</body>
</html>

(12) document.implementation: 返回处理该文档的 DOMImplementation 对象。
　　 document.inputEncoding: 返回用于文档的编码方式（在解析时）。

　　 document.lastModified: 返回文档被最后修改的日期和时间。

　　 document.title: 返回当前文档的标题。
　　 document.URL: 返回文档完整的URL

　　 document.readyState: 返回文档状态
　　 document.referrer: 返回载入当前文档的文档的 URL。

<!doctype html>
<html>
<head>
<title>MyTest</title>
<meta charset="UTF-8">
<script type="text/javascript">
    function MyTest(){
        document.getElementById("myInfo").innerHTML='是否有功能HTML DOM 1.0: '+document.implementation.hasFeature("HTML","1.0");
        document.getElementById("myInfo").innerHTML+='<br/>inputEncoding: '+document.inputEncoding;
        document.getElementById("myInfo").innerHTML+='<br/>lastModified: '+document.lastModified;
        document.getElementById("myInfo").innerHTML+='<br/>readyState: '+document.readyState;
        document.getElementById("myInfo").innerHTML+='<br/>referrer: '+document.referrer;
        document.getElementById("myInfo").innerHTML+='<br/>URL: '+document.URL;
        document.getElementById("myInfo").innerHTML+='<br/>title: '+document.title;
    }
</script>
</head>
<body>
    <input type="button" value="按钮" onclick="MyTest()">
    <div id='myInfo' style="background-color:yellow"></div>
</body>
</html>

(13) document.normalize(): 删除空文本节点，并连接相邻节点

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    function my_addTextNode(){
        var y=document.createTextNode("新节点 ");
        document.getElementById("a").appendChild(y);
        document.getElementById("c").innerHTML=document.getElementById("a").childNodes.length;
    }
    function my_normalize(){
        document.normalize();
        document.getElementById("c").innerHTML=document.getElementById("a").childNodes.length;
    }
</script>
</head>
<body>
    <div id='a'></div>
    <input type="button" value="添加节点" onclick="my_addTextNode()">
    <input type="button" value="normalize" onclick="my_normalize()">
    <div id='c'></div>
</body>
</html>

　　

(14) document.querySelector(): 返回文档中匹配指定的CSS选择器的第一元素
　　 document.querySelectorAll(): 返回文档中匹配的CSS选择器的所有元素节点列表

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    function my_Test(){
        document.querySelector("#a").innerHTML = "Hello World!";
        document.querySelectorAll(".b")[0].style.backgroundColor = "red";
    }
</script>
</head>
<body>
    <input type="button" value="点我" onclick="my_Test()"/>
    <div id='a'>Hello</div>
    <div class='b'>XXX</div>
    <div class='b'>XXXXXX</div>
</body>
</html>

(15) document.removeEventListener(): 移除文档中的事件句柄(由 addEventListener() 方法添加)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    document.addEventListener("mousemove", myTest);
    function myTest() {
        document.getElementById("a").innerHTML = Math.random();
    }
    function my_removeEventListener() {
        document.removeEventListener("mousemove", myTest);
    }
</script>
</head>
<body>
    <input type="button" value="点我" onclick="my_removeEventListener()"/>
    <div id='a'>Hello</div>
</body>
</html>