Dom、Dom屬性、Dom方法、Dom操作

課程內(nèi)容

1.認(rèn)識(shí)DOM

當(dāng)網(wǎng)頁被加載時(shí),瀏覽器會(huì)創(chuàng)建頁面的文檔對(duì)象模型(Document Object Model)。

  • JavaScript 能夠改變頁面中的所有 HTML 元素
  • JavaScript 能夠改變頁面中的所有 HTML 屬性
  • JavaScript 能夠改變頁面中的所有 CSS 樣式
  • JavaScript 能夠?qū)撁嬷械乃惺录龀龇磻?yīng)

1.1 DOM節(jié)點(diǎn)樹


1.2節(jié)點(diǎn)關(guān)系

<html>
  <head>
    <title>DOM 教程</title>
  </head>
  <body>
    <h1>DOM 第一課</h1>
    <p>Hello world!</p>
  </body>
 </html>

從上面的 HTML 中:
<html> 節(jié)點(diǎn)沒有父節(jié)點(diǎn);它是根節(jié)點(diǎn)
<head> 和 <body> 的父節(jié)點(diǎn)是<html> 節(jié)點(diǎn)
文本節(jié)點(diǎn) "Hello world!" 的父節(jié)點(diǎn)是 <p> 節(jié)點(diǎn)
并且:
<html> 節(jié)點(diǎn)擁有兩個(gè)子節(jié)點(diǎn):<head> 和 <body>
<head> 節(jié)點(diǎn)擁有一個(gè)子節(jié)點(diǎn):<title> 節(jié)點(diǎn)
<title> 節(jié)點(diǎn)也擁有一個(gè)子節(jié)點(diǎn):文本節(jié)點(diǎn) "DOM 教程"
<h1> 和 <p> 節(jié)點(diǎn)是同胞節(jié)點(diǎn),同時(shí)也是<body> 的子節(jié)點(diǎn)

document 對(duì)象

每個(gè)載入瀏覽器的HTML文檔都會(huì)成為document對(duì)象。document對(duì)象包含了文檔的基本信息,我們可以通過JavaScript對(duì)HTML頁面中的所有元素進(jìn)行訪問、修改。

document對(duì)象常用屬性

  • document.doctype
  • document.title
  • document.head
  • document.body
Element 對(duì)象

除了document對(duì)象,在DOM中最常用的就是Element對(duì)象了,Element對(duì)象表示HTML元素。
Element 對(duì)象可以擁有類型為元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)的子節(jié)點(diǎn),DOM提供了一系列的方法可以進(jìn)行元素的增、刪、改、查操作

Element有幾個(gè)重要屬性

  • nodeName:元素標(biāo)簽名,還有個(gè)類似的tagName
  • className:類名
  • id:元素id
  • children:子元素列表(HTMLCollection)
  • childNodes:子元素列表(NodeList)
  • firstChild:第一個(gè)子元素
  • lastChild:最后一個(gè)子元素
  • nextSibling:下一個(gè)兄弟元素
  • previousSibling:上一個(gè)兄弟元素
  • parentNode、parentElement:父元素
2.節(jié)點(diǎn)訪問

getElementById() 方法返回帶有指定 ID 的元素:如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn),則返回null。這也是獲取一個(gè)元素最快的方法

var elem = document.getElementById("test");

getElementsByTagName()方法返回所有指定標(biāo)簽的元素(搜索范圍包括本身)。返回值是一個(gè)HTMLCollection對(duì)象,也就是說,搜索結(jié)果是一個(gè)動(dòng)態(tài)集合,任何元素的變化都會(huì)實(shí)時(shí)反映在返回的集合中。這個(gè)方法不僅可以在document對(duì)象上調(diào)用,也可以在任何元素節(jié)點(diǎn)上調(diào)用。

var paras = document.getElementsByTagName("p");

getElementsByClassName() 方法返回一個(gè)類似數(shù)組的對(duì)象(HTMLCollection類型的對(duì)象),包括了所有class名字符合指定條件的元素(搜索范圍包括本身),元素的變化實(shí)時(shí)反映在返回結(jié)果中。這個(gè)方法不僅可以在document對(duì)象上調(diào)用,也可以在任何元素節(jié)點(diǎn)上調(diào)用。

var element=document.getElementsByClassName("intro");

querySelector()
querySelector方法返回匹配指定的CSS選擇器的元素節(jié)點(diǎn)。如果有多個(gè)節(jié)點(diǎn)滿足匹配條件,則返回第一個(gè)匹配的節(jié)點(diǎn)。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn),則返回null。

var el1 = document.querySelector(".myclass");
var el2 = document.querySelector('#myParent > [ng-click]');

querySelector方法無法選中CSS偽元素。

querySelectorAll()
querySelectorAll方法返回匹配指定的CSS選擇器的所有節(jié)點(diǎn),返回的是NodeList類型的對(duì)象。NodeList對(duì)象不是動(dòng)態(tài)集合,所以元素節(jié)點(diǎn)的變化無法實(shí)時(shí)反映在返回結(jié)果中。

elementList = document.querySelectorAll(selectors);

querySelectorAll方法的參數(shù),可以是逗號(hào)分隔的多個(gè)CSS選擇器,返回所有匹配其中一個(gè)選擇器的元素。

var matches = document.querySelectorAll("div.note, div.alert");

上面代碼返回class屬性是note或alert的div元素。

3.DOM修改添加

修改html內(nèi)容
修改 HTML 內(nèi)容的最簡單的方法時(shí)使用 innerHTML 屬性。
如需改變 HTML 元素的內(nèi)容,請(qǐng)使用這個(gè)語法:
document.getElementById(id).innerHTML=new HTML

<p id="p1">Hello World!</p>

<script>
//改變p1的內(nèi)容
var el = document.getElementById("p1");
el.innerHTML="New text!";
console.log(el);
</script>

修改html屬性
如需改變 HTML 元素的屬性,請(qǐng)使用這個(gè)語法:
document.getElementById(id).attribute=新值 document.getElementById(id).setAttribute(屬性, 值)

<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
document.getElementById("image").setAttribute('class','pic');
</script>

改變樣式
element.style.xxx = xxx;

<p id="p1">我是段落,要變色</p>
<button>變色</button>
<script>
    document.getElementsByTagName('button')[0].onclick=function(){
        document.getElementById('p1').style.color="red";
    }
</script>

創(chuàng)建新的 HTML 元素
創(chuàng)建元素,然后把它追加到已有的元素上

<div class="d1">

</div>
<script>
    var para=document.createElement("p");
    para.innerHtml="我是新添加的段落";
    var element=document.getElementById("d1");
    element.appendChild(para);
</script>

添加元素
appendChild,使用方法target.appendChild(newChild);

<div id="content"></div>
<button id="btn">添加圖片</button>
<script>
    var btn = document.getElementById("btn");
    btn.onclick=function(){
        var img = document.createElement("img");
        img.src = "http://www.baidu.com/img/baidu_sylogo1.gif";
        btn.appendChild(img);           
    }
<script>

insertBefore

- insertBefore() 方法的作用是:在現(xiàn)有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn) 
- insertBefore用法:target.insertBefore(newChild,existingChild) 
- newChild作為target的子節(jié)點(diǎn)插入到existingChild節(jié)點(diǎn)之前

刪除元素

removeChild

element.removeChild(img);
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • ??DOM(文檔對(duì)象模型)是針對(duì) HTML 和 XML 文檔的一個(gè) API(應(yīng)用程序編程接口)。 ??DOM 描繪...
    霜天曉閱讀 3,684評(píng)論 0 7
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 27,632評(píng)論 1 45
  • 一、JS前言 (1)認(rèn)識(shí)JS 也許你已經(jīng)了解HTML標(biāo)記(也稱為結(jié)構(gòu)),知道了CSS樣式(也稱為表示),會(huì)使用HT...
    凜0_0閱讀 2,798評(píng)論 0 8
  • ??JavaScript 與 HTML 之間的交互是通過事件實(shí)現(xiàn)的。 ??事件,就是文檔或?yàn)g覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,527評(píng)論 1 11
  • 本章內(nèi)容 理解包含不同層次節(jié)點(diǎn)的 DOM 使用不同的節(jié)點(diǎn)類型 克服瀏覽器兼容性問題及各種陷阱 DOM 是針對(duì) HT...
    悶油瓶小張閱讀 658評(píng)論 0 1