35-JavaScript-DOM-document对象

阳光穿透心脏的1/2处 2022-09-18 12:48 174阅读 0赞

Document 对象

# 1. 概述 #

每个载入浏览器的 HTML 文档都会成为 Document 对象。  
即, Document对象 代表 整个HTML文档.  
Document 对象使我们可以从脚本中对HTML页面中的所有元素进行访问。  
提示：  
Document 对象是 Window 对象的一部分，  
可通过 window.document 属性对其进行访问。  
  
参考: [http://www.w3school.com.cn/htmldom/dom\_obj\_document.asp][http_www.w3school.com.cn_htmldom_dom_obj_document.asp]

# 2. 集合 #

![SouthEast][]

# 3. 属性 #

![SouthEast 1][]

body 属性和方法  
  
\- appendChild()  
\- removeChild()  
\- getElementByTagName()  
\- bgColor 文档背景色  
\- background 文档背景图  
\- innerText  
\- innerHTML  
\- onload事件  
\- onunload事件 (用于关闭页面后, 向服务器发请求消除session)  
\- onbeforeunload事件  
  
\- onselectstart 事件 , 选择body内的内容时  
\- onscroll事件, 拉动滚动条时, (浮动广告跟着滚动条走)  
  
 **① 说明**  
  
提供对 <body> 元素的直接访问。  
对于定义了框架集的文档，该属性引用最外层的 <frameset>。  
  
 **② 参考**  
  
[http://www.w3school.com.cn/htmldom/htmldom\_reference.asp][http_www.w3school.com.cn_htmldom_htmldom_reference.asp]  
[http://www.w3school.com.cn/htmldom/dom\_obj\_body.asp][http_www.w3school.com.cn_htmldom_dom_obj_body.asp]  
  
 **③ innerText 与 innerHTML的区别**  
  
innerText 把字符串原样显示  
innerHTML 字符串会被JavaScript引擎解析  
  
 **④ 跟着滚动条跑的浮动广告 - onscroll事件**

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    
    <script type="text/javascript">
    
        var ad;
    
        window.onload = function() {
            ad = document.getElementById("ad");
        }
    
        window.onscroll = function() {
    
            ad.style.top = document.body.scrollTop + 50;
    
        }
    
    </script>
    
    <style type="text/css">
    
        div {
            width: 200px;
            height: 200px;
            background-color: green;
            position: absolute;
        }
        
    </style>
    
    </head>
    
    <body>
        <div id="ad">我是讨厌的广告</div>
        <textarea rows="1000">
            .......
        </textarea>
    </body>
    </html>

# 4. 方法 #

##  **1) write() / writeln()**  ##

向文档写 HTML 表达式 或 JavaScript 代码。  
writeln()等同于 write() 方法，  
不同的是在每个表达式之后写一个换行符("\\n\\r")。

##  **2) open(mimetype,replace)** ##

该方法将擦除当前 HTML 文档的内容，开始一个新的文档，  
新文档用 write() 方法或 writeln() 方法编写。

##  **3) close()**  ##

可关闭一个由 document.open 方法打开的输出流，  
并显示选定的数据。

##  **4) 获取文档中元素** ##

**① document.getElementById(id)**   
  
返回对拥有指定 id 的 第一个对象的引用。  
  
 **② document.getElementsByName(name)**   
  
返回带有指定名称的 对象集合。  
  
 **③ element.getElementsByTagName(tagname)**   
  
返回带有指定标签名的 对象集合。

<div id="links">
        <a href="#">1</a>
        <a href="#">1</a>
    </div>
    
    <script type="text/javascript">
        var links = document.getElementById("links");
        console.info( links.getElementsByTagName("a") );
    </script>

# 5. 节点操作 #

元素(节点)的 创建/添加/删除.  
  
注:  
HTML DOM 和 XML DOM 都遵循相同的DOM规范  
因此, 可参看 XML DOM  
  
1) 动态创建 HTML元素  
  
 **① document.createElement(tagName)  
② parentElement.appendChild(newChild)  
③ parentElement.removeChild(oldChild)**

[http_www.w3school.com.cn_htmldom_dom_obj_document.asp]: http://www.w3school.com.cn/htmldom/dom_obj_document.asp
[SouthEast]: /images/20220828/e1f332478725412f83bfeed7964bbdfe.png
[SouthEast 1]: /images/20220828/17750f40959e46f39fd7574789b13515.png
[http_www.w3school.com.cn_htmldom_htmldom_reference.asp]: http://www.w3school.com.cn/htmldom/htmldom_reference.asp
[http_www.w3school.com.cn_htmldom_dom_obj_body.asp]: http://www.w3school.com.cn/htmldom/dom_obj_body.asp