dom對象常用的屬性和方法有哪些？

本文轉載自查看原文 2018-06-02 13:12 1596 1_html5/ DOM

dom對象常用的屬性和方法有哪些？

一、總結

一句話總結：

1、document屬性和方法：document的屬性有head，body之類，方法有各種獲取element的方法

2、element的屬性和方法：屬性比如style，innerHTML和固有屬性，方法比如各種動態操作元素，比如createElement，還有操作屬性的set、get、remove、create解Attribute

3、attribute的屬性和方法：有點包含在element里面的感覺

1、我們熟知location是window的屬性或者說對象，那么document對象有location屬性么？

解答：window有location對象，document同樣有location對象，

2、如何獲取一個html的文檔聲明？

解答：document.doctype;//可以知道文檔聲明，如果沒有return null;這里是<!DOCTYPE html>

3、一個有如下 <!DOCTYPE html>文檔聲明的html文檔，它的文檔聲明的名字是什么？

解答：html

4、如何獲取一個html的head部分？

解答：document.head//很明顯選取head節點.就是<head></head>這段

5、如何獲取一個html的body部分？

解答：document.body//選取body節點.

6、如何獲取一個文檔的文檔聲明的名字？

解答：document.doctype.name//知道文檔聲明的名字.

7、document的location屬性是來干嘛的？

解答：ocation一般主要是用來獲取地址。

8、如何獲取一個文檔當前的地址？

解答：document.location.href//獲取當前地址

9、給文檔重新分配地址的三種方法是哪三種？

解答：分別是location，location的assign方法和href屬性。 document.location.assign(http://www.baidu.com)//分配一個地址 document.location="http://www.baidu.com" document.location.href="http://www.baidu.com"

10、innerText和innerHTML的區別是什么（兩點區別）？

解答：一個是獲取文本，一個是獲取標簽。 innerText是IE特有，innerHTML則是符合W3C協議的。

11、innerText里面的標簽還是標簽么？

解答：不是，已經轉義為了文本。

12、element常用的幾個屬性是哪幾個？

解答：id、nodeName、className、child、lastchild、firstchild、nextSibing、previousSibing

13、如何通過DOM2方法獲取一個標簽？

解答：var d=document.querySelector("#p1");

14、DOM2獲取一個標簽的兩個常見方法是哪兩個？

解答：querySelector和querySelectorAll

15、querySelector和querySelectorAll和區別是什么？

解答：前者獲取一個，后者獲取所有對應標簽的。

16、如何在body中把b標簽插入到a標簽之前？

解答：document.body.insertBefore(b,a);//把b插在a前面- - 17、

17、insertBefore除了成為普通元素的方法，可否成為body的方法？

解答：肯定可以啊

18、在body中用c標簽替換b標簽怎么實現？

解答：document.body.replaceChild(c,b);//（new,old）

19、屬性操作的四個方法是哪四個？

解答：set，get，create，remove，后面分別接Attribute

20、DOM0點擊事件怎么寫？

解答：a.onclick=function(){}

21、DOM2點擊事件怎么寫？

解答：btn.addEventListener("click",fun,false)

22、DOM2中主要操作事件的兩個方法是哪兩個？

解答：add和remove接EventListener

23、btn.addEventListener("click",fun,false)中的第三個參數是什么意思？

解答：如果是true 就是在事件捕獲階段調用，如果是false則是在事件冒泡階段調用。

24、這樣用removeEventListener("click",function(){})有效果么？

解答：這樣是沒有效果的。雖然是一個函數，但是JS會認為傳入了一個另外一個函數，雖然和之前一個一模一樣。

25、IE事件調用的方法是什么？

解答：IE用的是attach的方式，a.attachEvent("onclick",function(){}

二、dom對象常用的屬性和方法有哪些？

1、DOM對象的一些常用方法：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Z-one</title>
 6 </head>
 7 <body>
 8     <p id="p1" class="p">測試</p>
 9     <p id="p2" class="p">測試</p>
10     <p id="p3" class="p">測試</p>
11 </body>
12 </html>

以上面code為例子

（1）、document 對象

a、document對象屬性

document.doctype;//可以知道文檔聲明，如果沒有return null;這里是<!DOCTYPE html>
document.doctype.name//知道文檔聲明的名字.
document.head//很明顯選取head節點.就是<head></head>這段
document.body//選取body節點.

b、location

我記得location一般主要是用來獲取地址。
常用方法：

1 document.location.href//獲取當前地址
2 document.location.assign(http://www.baidu.com)//分配一個地址
3 另外如果href 是獲取當前地址，如果給他賦值，把一個地址給他，也能達到assign的效果；
4 document.location="http://www.baidu.com"
5 或者
6 document.location.href="http://www.baidu.com"

innerText，innerHTML;

這二個放一起說，主要是都挺像的,這兩個的作用都是往文檔中寫出內容,但是區別主要是：

document.body.innerText("Z-ONE") 主要是寫入一個純文本內容，此時<span>並不是標簽。而是一個文本"<span>".(其實這樣也顯得innerText的安全性高一點)

document.body.innerHTML("z-one")也是寫入一個純文本內容，但是不會將HTML標簽進行轉義。

另外innerHTML是符合W3C協議的，而innerText只適用於IE瀏覽器。

c、Element元素

Element的幾個必要重要的屬性感覺常用的就是：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Z-one</title>
 6 </head>
 7 <body>
 8     <p id="p1" class="p">測試</p>
 9     <p id="p2" class="p">測試</p>
10     <p id="p3" class="p">測試</p>
11   <script>
12         var a=document.getElementById("p1")//獲取上面那個例子的p1元素.
13           a.id// 獲取該元素的id... "p1" (貌似就是通過p1找到的他- -)
14           a.nodeName//獲取到節點的名字(就是標簽名字) 這里是"p"
15           a.className//獲取節點的class名字，這里因為關鍵字的原因，只能用className;
16            另外還有一些
17             child//獲取子元素  這里沒有
18            lastchild//最后一個子元素.
19            firstchild//第一個子元素.
20            nextSibling//下一個兄弟元素.
21            previousSibing//上一個兄弟元素.
22 </script>
23 </body>
24 </html>

獲取元素的方法
獲取元素的方法主要有三種：

通過ID
通過類名
通過元素種類
*(針對於input元素通過分組名字)
通過DOM2的方法
下面這個例子很好表示了獲取元素的幾種方法

 1 　　<p id="p1" class="p">測試</p>
 2     <p id="p2" class="p">測試</p>
 3     <p id="p3" class="p">測試</p>
 4 </body>
 5 <script>
 6     window.onload=function(){
 7         //用id獲取第二個p標簽的元素
 8         var a=document.getElementById("p2");
 9         a.style.color="red";
10         //用標簽名字來獲取第一個p標簽;
11         var b=document.getElementsByTagName("p")[0]//獲取的是一個集合,
12         b.style.fontSize="30px";//這里font-size,會報錯,就用fontSize;
13         //用類名來獲取第三個標簽.
14         var c=document.getElementsByClassName("p")[2]//和上面一個道理
15         c.style.fontWeight="bold";
16         //通過DOM2的方法獲取第1個標簽;
17         var d=document.querySelector("#p1");
18         //如果是queryselectorAll() 就是獲取一個集合,操作方式和上面類似。
19         //這里是通過類名，如果是ID就用#p1 標簽就用p,一般是獲取第一個元素.這點和Tag和Class都不一樣
20         d.style.color="green";
21     }

然后就是Element的創建和添加元素。用一個例子表示吧：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>創建元素</title>
 6 </head>
 7 <script>
 8     window.onload=function(){
 9         var a=document.createElement("div");
10         a.className="p1"
11         a.innerHTML=("<span>測試下</span>");
12         //添加到文檔中
13         document.body.appendChild(a);//這下子元素就寫進去了
14         //如果還要添加 可以照着上面來，我們現在就添加一個元素進去
15         var b=document.createElement("div");
16         b.innerHTML="<p>測試第二彈</p>";
17         //這次我們添加在上一個元素前面
18         document.body.insertBefore(b,a);//把b插在a前面- -
19         //這時候不想要b了，想替換掉，可以這么做!
20         var c=document.createElement("div");
21         c.innerHTML="我就是來替換的";
22         document.body.replaceChild(c,b);//（new,old）
23     }
24 </script>
25 <body>
26     
27 </body>
28 </html>

屬性操作

Element的屬性操作一般就下面四種：

getAttribute 獲取一個屬性。
setAttribute 設置一個屬性。
removeAttribute 刪除一個屬性。
createAttribute 新建一個屬性。
舉個例子吧

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>獲取屬性</title>
 6 </head>
 7 <body>
 8     <div id="x1" class="p1"></div>
 9 </body>
10 <script>
11     var a=document.getElementById("x1");
12     a.getAttribute("id");//獲取該階段的屬性：id
13     a.setAttribute("id","Z-one");//設置一個屬性。
14     a.removeAttribute("id")//刪除ID節點
15 </script>

2、事件處理

（1）、DOM0級事件處理

還是用一個例子說明：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <input type="button" id="a" value="按鈕">
 9 </body>
10 <script>
11     var a=document.getElementById("a");
12     a.onclick=function(){
13         console.log("測試一下");
14     }
15     //這樣點擊按鈕就會在控制台輸出測試一下
16 </script>

這一種應該算是比較常見的一種操作方式。沒什么好說的。我們看下面

（2）、DOM2級事件處理程序

這里前面區別開來，就是我是你的升級版！。出了這兩個方法
addEventListener();//添加
removeEventListener();//去除

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>DOM2級</title>
 6 </head>
 7 <body>
 8     <input type="button" value="按鈕">
 9 </body>
10 <script>
11      var fun=function(){
12         console.log("測試一下");
13     }
14     var btn=document.querySelector("input");
15     btn.addEventListener("click",fun,false)
16     btn.removeEventListener("click",fun,false)
17         //如果是true 就是在事件捕獲階段調用，如果是false則是在事件冒泡階段調用。
18     //另外如果這里要用removeEventListener("click",function(){})//這樣是沒有效果的。雖然是一個函數，但是JS會認為傳入了一個另外一個函數，雖然和之前一個一模一樣。
19 </script>
20 </html>

（3）、IE事件調用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>IE事件調用</title>
 6 </head>
 7 <body>
 8     <input type="button" id="p1" value="按鈕">
 9 </body>
10 <script>
11     var a=document.getElementById("p1");
12  a.attachEvent("onclick",function(){
13         console.log("測試一下");
14     })
15     a.attachEvent("onclick",function(){
16         console.log("猜猜我在第一還是在第二");
17     })
18 //這里有一點。如果是如果是調用了兩次attachEvent（）,后面的會在前面出現。和DOM2是相反的.
19 另外IE下 事件處理會在全局作用下運行。
20 </script>
21 </html>

三、測試題-簡答題