dom对象常用的属性和方法有哪些？
dom對(duì)象常用的屬性和方法有哪些？
一、總結(jié)
一句話總結(jié)：
1、document屬性和方法：document的屬性有head，body之類(lèi)，方法有各種獲取element的方法
2、element的屬性和方法：屬性比如style，innerHTML和固有屬性，方法比如各種動(dòng)態(tài)操作元素，比如createElement，還有操作屬性的set、get、remove、create解Attribute
3、attribute的屬性和方法：有點(diǎn)包含在element里面的感覺(jué)
?
1、我們熟知location是window的屬性或者說(shuō)對(duì)象，那么document對(duì)象有l(wèi)ocation屬性么？
解答：window有l(wèi)ocation對(duì)象，document同樣有l(wèi)ocation對(duì)象，
2、如何獲取一個(gè)html的文檔聲明？
解答：document.doctype;//可以知道文檔聲明，如果沒(méi)有return null;這里是<!DOCTYPE html>
3、一個(gè)有如下 <!DOCTYPE html>文檔聲明的html文檔，它的文檔聲明的名字是什么？
解答：html ?
4、如何獲取一個(gè)html的head部分？
解答：document.head//很明顯選取head節(jié)點(diǎn).就是<head></head>這段??
5、如何獲取一個(gè)html的body部分？
解答：document.body//選取body節(jié)點(diǎn).??
6、如何獲取一個(gè)文檔的文檔聲明的名字？
解答：document.doctype.name//知道文檔聲明的名字.??
7、document的location屬性是來(lái)干嘛的？
解答：ocation一般主要是用來(lái)獲取地址。 ?
8、如何獲取一個(gè)文檔當(dāng)前的地址？
解答：document.location.href//獲取當(dāng)前地址??
9、給文檔重新分配地址的三種方法是哪三種？
解答：分別是location，location的assign方法和href屬性。?document.location.assign(http://www.baidu.com)//分配一個(gè)地址?document.location="http://www.baidu.com"?document.location.href="http://www.baidu.com" ?
10、innerText和innerHTML的區(qū)別是什么（兩點(diǎn)區(qū)別）？
解答：一個(gè)是獲取文本，一個(gè)是獲取標(biāo)簽。 innerText是IE特有，innerHTML則是符合W3C協(xié)議的。 ?
11、innerText里面的標(biāo)簽還是標(biāo)簽么？
解答：不是，已經(jīng)轉(zhuǎn)義為了文本。 ?
12、element常用的幾個(gè)屬性是哪幾個(gè)？
解答：id、nodeName、className、child、lastchild、firstchild、nextSibing、previousSibing ?
13、如何通過(guò)DOM2方法獲取一個(gè)標(biāo)簽？
解答：var?d=document.querySelector("#p1");??
14、DOM2獲取一個(gè)標(biāo)簽的兩個(gè)常見(jiàn)方法是哪兩個(gè)？
解答：querySelector和querySelectorAll ?
15、querySelector和querySelectorAll和區(qū)別是什么？
解答：前者獲取一個(gè)，后者獲取所有對(duì)應(yīng)標(biāo)簽的。 ?
16、如何在body中把b標(biāo)簽插入到a標(biāo)簽之前？
解答：document.body.insertBefore(b,a);//把b插在a前面- -?? 17、
17、insertBefore除了成為普通元素的方法，可否成為body的方法？
解答：肯定可以啊??
18、在body中用c標(biāo)簽替換b標(biāo)簽怎么實(shí)現(xiàn)？
解答：document.body.replaceChild(c,b);//（new,old）??
19、屬性操作的四個(gè)方法是哪四個(gè)？
解答：set，get，create，remove，后面分別接Attribute ?
20、DOM0點(diǎn)擊事件怎么寫(xiě)？
解答：a.onclick=function(){} ?
21、DOM2點(diǎn)擊事件怎么寫(xiě)？
解答：btn.addEventListener("click",fun,false)??
22、DOM2中主要操作事件的兩個(gè)方法是哪兩個(gè)？
解答：add和remove接EventListener ?
23、btn.addEventListener("click",fun,false)中的第三個(gè)參數(shù)是什么意思？
解答：如果是true 就是在事件捕獲階段調(diào)用，如果是false則是在事件冒泡階段調(diào)用。??
24、這樣用removeEventListener("click",function(){})有效果么？
? 解答：這樣是沒(méi)有效果的。雖然是一個(gè)函數(shù)，但是JS會(huì)認(rèn)為傳入了一個(gè)另外一個(gè)函數(shù)，雖然和之前一個(gè)一模一樣。??
25、IE事件調(diào)用的方法是什么？
解答：IE用的是attach的方式，a.attachEvent("onclick",function(){} ? ? ? ?
?
?
?
二、dom對(duì)象常用的屬性和方法有哪些？
?
1、DOM對(duì)象的一些常用方法：
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">測(cè)試</p> 9 <p id="p2" class="p">測(cè)試</p> 10 <p id="p3" class="p">測(cè)試</p> 11 </body> 12 </html>以上面code為例子
（1）、document 對(duì)象
a、document對(duì)象屬性
document.doctype;//可以知道文檔聲明，如果沒(méi)有return null;這里是<!DOCTYPE html> document.doctype.name//知道文檔聲明的名字. document.head//很明顯選取head節(jié)點(diǎn).就是<head></head>這段 document.body//選取body節(jié)點(diǎn).?
b、location
我記得location一般主要是用來(lái)獲取地址。
常用方法：
?
innerText，innerHTML;
這二個(gè)放一起說(shuō)，主要是都挺像的,這兩個(gè)的作用都是往文檔中寫(xiě)出內(nèi)容,但是區(qū)別主要是：
document.body.innerText("Z-ONE") 主要是寫(xiě)入一個(gè)純文本內(nèi)容，此時(shí)<span>并不是標(biāo)簽。而是一個(gè)文本"<span>".(其實(shí)這樣也顯得innerText的安全性高一點(diǎn))
document.body.innerHTML("z-one")也是寫(xiě)入一個(gè)純文本內(nèi)容，但是不會(huì)將HTML標(biāo)簽進(jìn)行轉(zhuǎn)義。
另外innerHTML是符合W3C協(xié)議的，而innerText只適用于IE瀏覽器。
?
c、Element元素
Element的幾個(gè)必要重要的屬性 感覺(jué)常用的就是：
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">測(cè)試</p> 9 <p id="p2" class="p">測(cè)試</p> 10 <p id="p3" class="p">測(cè)試</p> 11 <script> 12 var a=document.getElementById("p1")//獲取上面那個(gè)例子的p1元素. 13 a.id// 獲取該元素的id... "p1" (貌似就是通過(guò)p1找到的他- -) 14 a.nodeName//獲取到節(jié)點(diǎn)的名字(就是標(biāo)簽名字) 這里是"p" 15 a.className//獲取節(jié)點(diǎn)的class名字，這里因?yàn)殛P(guān)鍵字的原因，只能用className; 16 另外還有一些 17 child//獲取子元素 這里沒(méi)有 18 lastchild//最后一個(gè)子元素. 19 firstchild//第一個(gè)子元素. 20 nextSibling//下一個(gè)兄弟元素. 21 previousSibing//上一個(gè)兄弟元素. 22 </script> 23 </body> 24 </html>獲取元素的方法
獲取元素的方法主要有三種：
- 通過(guò)ID
- 通過(guò)類(lèi)名
- 通過(guò)元素種類(lèi)
*(針對(duì)于input元素 通過(guò)分組名字) - 通過(guò)DOM2的方法
下面這個(gè)例子很好表示了獲取元素的幾種方法
然后就是Element的創(chuàng)建和添加元素。用一個(gè)例子表示吧：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>創(chuàng)建元素</title> 6 </head> 7 <script> 8 window.onload=function(){ 9 var a=document.createElement("div"); 10 a.className="p1" 11 a.innerHTML=("<span>測(cè)試下</span>"); 12 //添加到文檔中 13 document.body.appendChild(a);//這下子元素就寫(xiě)進(jìn)去了 14 //如果還要添加 可以照著上面來(lái)，我們現(xiàn)在就添加一個(gè)元素進(jìn)去 15 var b=document.createElement("div"); 16 b.innerHTML="<p>測(cè)試第二彈</p>"; 17 //這次我們添加在上一個(gè)元素前面 18 document.body.insertBefore(b,a);//把b插在a前面- - 19 //這時(shí)候不想要b了，想替換掉，可以這么做! 20 var c=document.createElement("div"); 21 c.innerHTML="我就是來(lái)替換的"; 22 document.body.replaceChild(c,b);//（new,old） 23 } 24 </script> 25 <body> 26 27 </body> 28 </html>?
屬性操作
Element的屬性操作一般就下面四種：
- getAttribute 獲取一個(gè)屬性。
- setAttribute 設(shè)置一個(gè)屬性。
- removeAttribute 刪除一個(gè)屬性。
- createAttribute 新建一個(gè)屬性。
舉個(gè)例子吧
?
2、事件處理
（1）、DOM0級(jí)事件處理
還是用一個(gè)例子說(shuō)明：
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("測(cè)試一下"); 14 } 15 //這樣點(diǎn)擊按鈕就會(huì)在控制臺(tái)輸出測(cè)試一下 16 </script>這一種應(yīng)該算是比較常見(jiàn)的一種操作方式。沒(méi)什么好說(shuō)的。我們看下面
（2）、DOM2級(jí)事件處理程序
這里前面區(qū)別開(kāi)來(lái)，就是我是你的升級(jí)版！。出了這兩個(gè)方法
addEventListener();//添加
removeEventListener();//去除
?
（3）、IE事件調(diào)用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>IE事件調(diào)用</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("測(cè)試一下"); 14 }) 15 a.attachEvent("onclick",function(){ 16 console.log("猜猜我在第一還是在第二"); 17 }) 18 //這里有一點(diǎn)。如果是如果是調(diào)用了兩次attachEvent（）,后面的會(huì)在前面出現(xiàn)。和DOM2是相反的. 19 另外IE下 事件處理會(huì)在全局作用下運(yùn)行。 20 </script> 21 </html>?
?
三、測(cè)試題-簡(jiǎn)答題
1、我們熟知location是window的屬性或者說(shuō)對(duì)象，那么document對(duì)象有l(wèi)ocation屬性么？
解答：window有l(wèi)ocation對(duì)象，document同樣有l(wèi)ocation對(duì)象，
2、如何獲取一個(gè)html的文檔聲明？
解答：document.doctype;//可以知道文檔聲明，如果沒(méi)有return null;這里是<!DOCTYPE html>
3、一個(gè)有如下 <!DOCTYPE html>文檔聲明的html文檔，它的文檔聲明的名字是什么？
解答：html ?
4、如何獲取一個(gè)html的head部分？
解答：document.head//很明顯選取head節(jié)點(diǎn).就是<head></head>這段 ?
5、如何獲取一個(gè)html的body部分？
解答：document.body//選取body節(jié)點(diǎn). ?
6、如何獲取一個(gè)文檔的文檔聲明的名字？
解答：document.doctype.name//知道文檔聲明的名字. ?
7、document的location屬性是來(lái)干嘛的？
解答：ocation一般主要是用來(lái)獲取地址。 ?
8、如何獲取一個(gè)文檔當(dāng)前的地址？
解答：document.location.href//獲取當(dāng)前地址 ?
9、給文檔重新分配地址的三種方法是哪三種？
解答：分別是location，location的assign方法和href屬性。 document.location.assign(http://www.baidu.com)//分配一個(gè)地址 document.location="http://www.baidu.com" document.location.href="http://www.baidu.com" ?
10、innerText和innerHTML的區(qū)別是什么（兩點(diǎn)區(qū)別）？
解答：一個(gè)是獲取文本，一個(gè)是獲取標(biāo)簽。 innerText是IE特有，innerHTML則是符合W3C協(xié)議的。 ?
11、innerText里面的標(biāo)簽還是標(biāo)簽么？
解答：不是，已經(jīng)轉(zhuǎn)義為了文本。 ?
12、element常用的幾個(gè)屬性是哪幾個(gè)？
解答：id、nodeName、className、child、lastchild、firstchild、nextSibing、previousSibing ?
13、如何通過(guò)DOM2方法獲取一個(gè)標(biāo)簽？
解答：var d=document.querySelector("#p1"); ?
14、DOM2獲取一個(gè)標(biāo)簽的兩個(gè)常見(jiàn)方法是哪兩個(gè)？
解答：querySelector和querySelectorAll ?
15、querySelector和querySelectorAll和區(qū)別是什么？
解答：前者獲取一個(gè)，后者獲取所有對(duì)應(yīng)標(biāo)簽的。 ?
16、如何在body中把b標(biāo)簽插入到a標(biāo)簽之前？
解答：document.body.insertBefore(b,a);//把b插在a前面- - ? 17、
17、insertBefore除了成為普通元素的方法，可否成為body的方法？
解答：肯定可以啊 ?
18、在body中用c標(biāo)簽替換b標(biāo)簽怎么實(shí)現(xiàn)？
解答：document.body.replaceChild(c,b);//（new,old） ?
19、屬性操作的四個(gè)方法是哪四個(gè)？
解答：set，get，create，remove，后面分別接Attribute ?
20、DOM0點(diǎn)擊事件怎么寫(xiě)？
解答：a.onclick=function(){} ?
21、DOM2點(diǎn)擊事件怎么寫(xiě)？
解答：btn.addEventListener("click",fun,false) ?
22、DOM2中主要操作事件的兩個(gè)方法是哪兩個(gè)？
解答：add和remove接EventListener ?
23、btn.addEventListener("click",fun,false)中的第三個(gè)參數(shù)是什么意思？
解答：如果是true 就是在事件捕獲階段調(diào)用，如果是false則是在事件冒泡階段調(diào)用。 ?
24、這樣用removeEventListener("click",function(){})有效果么？
? 解答：這樣是沒(méi)有效果的。雖然是一個(gè)函數(shù)，但是JS會(huì)認(rèn)為傳入了一個(gè)另外一個(gè)函數(shù)，雖然和之前一個(gè)一模一樣。 ?
25、IE事件調(diào)用的方法是什么？
解答：IE用的是attach的方式，a.attachEvent("onclick",function(){} ? ? ? ?
?
轉(zhuǎn)載于:https://www.cnblogs.com/Renyi-Fan/p/9105002.html
總結(jié)
以上是生活随笔為你收集整理的dom对象常用的属性和方法有哪些？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： （转）CocosCreator零基础制作
- 下一篇： 梦到亲人断头是什么预兆