節(jié)點(diǎn)是DOM結(jié)構(gòu)中最基本的組成單元，每一個(gè)HTML標(biāo)簽都是DOM結(jié)構(gòu)的節(jié)點(diǎn)。
文檔是一個(gè) 文檔節(jié)點(diǎn) 。
所有的HTML元素都是 元素節(jié)點(diǎn)
所有 HTML 屬性都是 屬性節(jié)點(diǎn)
文本插入到 HTML 元素是 文本節(jié)點(diǎn)
注釋是 注釋節(jié)點(diǎn)。
最基本的節(jié)點(diǎn)類型是Node類型，其他所有類型都繼承自Node，DOM操作往往是js中開銷最大的部分，因而NodeList導(dǎo)致的問題最多。要注意：NodeList是‘動(dòng)態(tài)的'，也就是說，每次訪問NodeList對(duì)象，都會(huì)運(yùn)行一次查詢，雖然這樣增加了開銷，但可以保證我們新添加的節(jié)點(diǎn)都能在NodeList中訪問的到。
所有的元素節(jié)點(diǎn)都有共用的屬性和方法，讓我們來詳細(xì)看一看：
先來看較為常用的 通用 屬性
1 element.id 設(shè)置或返回元素的 id。
2 element.innerHTML 設(shè)置或者返回元素的內(nèi)容，可包含節(jié)點(diǎn)中的子標(biāo)簽以及內(nèi)容
3 element.innerText 設(shè)置或者返回元素的內(nèi)容，不包含節(jié)點(diǎn)中的子標(biāo)簽以及內(nèi)容
4 element.className 設(shè)置或者 返回元素的類名
5 element.nodeName 返回該節(jié)點(diǎn)的大寫字母標(biāo)簽名
6 element.nodeType 返回該結(jié)點(diǎn)的節(jié)點(diǎn)類型，1表示元素節(jié)點(diǎn) 2表示屬性節(jié)點(diǎn)……
7 element.nodeValue 返回該節(jié)點(diǎn)的value值，元素節(jié)點(diǎn)的該值為null
8 element.childNodes 返回元素的子節(jié)點(diǎn)的nodeslist對(duì)象，nodelist類似于數(shù)組，有l(wèi)ength屬性，可以使用方括號(hào) [index] 訪問指定索引的值(也可 以使用item(index)方法)。但nodelist并不是數(shù)組。
9 element.firstChild/element.lastChild 返回元素的第一個(gè)/最后一個(gè)子節(jié)點(diǎn)(包含注釋節(jié)點(diǎn)和文本節(jié)點(diǎn))
10 element.parentNode 返回該結(jié)點(diǎn)的父節(jié)點(diǎn)
11 element.previousSibling 返回與當(dāng)前節(jié)點(diǎn)同級(jí)的上一個(gè)節(jié)點(diǎn)(包含注釋節(jié)點(diǎn)和文本節(jié)點(diǎn))
12 element.nextSibling 返回與當(dāng)前節(jié)點(diǎn)同級(jí)的下一個(gè)節(jié)點(diǎn)(包含注釋節(jié)點(diǎn)和文本節(jié)點(diǎn))
13 element.chileElementCount : 返回子元素(不包括文本節(jié)點(diǎn)以及注釋節(jié)點(diǎn))的個(gè)數(shù)
14 element.firstElementChild /lastElementChild 返回第一個(gè)/最后一個(gè)子元素(不包括文本節(jié)點(diǎn)以及注釋節(jié)點(diǎn))
15 element.previousElementSibling/nextElementSibling 返回前一個(gè)/后一個(gè)兄弟元素(不包括文本節(jié)點(diǎn)以及注釋節(jié)點(diǎn))
16 element.clientHeight/clientWidth 返回內(nèi)容的可視高度/寬度（不包括邊框，邊距或滾動(dòng)條）
17 element.offsetHeight/offsetWidth /offsetLeft/offset/Top 返回元素的高度/寬度/相對(duì)于父元素的左偏移/右偏移(包括邊框和填充,不包括邊距)
18 element.style 設(shè)置或返回元素的樣式屬性,。示例：element.style.backgroundColor 注意，與CSS不同，style的屬性要去掉橫杠，第二個(gè)單詞 首字母要大寫
19 element.tagName 返回元素的標(biāo)簽名(大寫)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.form_style{
color: #5b5b5b;
font-size: large;
border: 5px solid rebeccapurple;
background-color: antiquewhite;
width: 440px;
height: 120px;
position: relative;
left: 20px;
top:20px;
margin:10px;
}
p {
color: #5b5b5b;
font-size: larger;
text-indent: 40px;
}
</style>
</head>
<body>
<form id='first_form' name="cangjingge" >
請(qǐng)選擇功法：<br/>
<input type="radio" name="gongfa" value="jysg">九陽神功<br/>
<input type="radio" name="gongfa" value="qkdny">乾坤大挪移<br/>
<input type="radio" name="gongfa" value="khbd">葵花寶典<br/>
<input type="radio" name="gongfa" value="xxdf">吸星大法<br/>
</form>
<p>少俠請(qǐng)三思?。?！</p><!--注釋標(biāo)簽-->
<p>推薦功法-->葵花寶典</p>
<script>
//js演示代碼請(qǐng)?zhí)砑又链? var a=document.getElementById('first_form'),
b = document.getElementsByTagName('p')[0];
console.log(a.id);
console.log(a.innerHTML);
console.log(a.className);
console.log(a.childNodes);
console.log(a.firstChild);
console.log(a.lastChild);
console.log(a.nodeName);
console.log(a.nodeType);
console.log(a.nodeValue);
console.log(a.parentNode);
console.log(a.clientHeight);
console.log(a.offsetHeight);
console.log(b.nextSibling);
console.log(b.nextElementSibling);
</script>
</body>
</html>瀏覽器顯示結(jié)果：
還有某些專屬屬性
專屬屬性指那些專屬于某種標(biāo)簽的屬性。比如 <a> 標(biāo)簽，有href和target屬性。<img> 有src屬性; <form>有entype以及action屬性……
a_element.href 返回當(dāng)前節(jié)點(diǎn)指向的超鏈接
再來看看較為常用的通用方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.form_style{
color: #5b5b5b;
font-size: large;
}
p {
color: #5b5b5b;
font-size: larger;
}
</style>
</head>
<body>
<form id='first_form' name="cangjingge" >
請(qǐng)選擇功法：<br/>
<input type="radio" name="gongfa" value="jysg">九陽神功<br/>
<input type="radio" name="gongfa" value="qkdny">乾坤大挪移<br/>
<input type="radio" name="gongfa" value="khbd">葵花寶典<br/>
<input type="radio" name="gongfa" value="xxdf">吸星大法<br/>
</form>
<p>少俠請(qǐng)三思?。?！</p>
<script>
//js演示代碼請(qǐng)?zhí)砑又链?
</script>
</body>
</html>(以下所有js演示代碼都是以本文檔中的 示例html代碼 為實(shí)驗(yàn)對(duì)象)
1 element.appendChild(nodeName) 向元素添加新的子節(jié)點(diǎn)，作為最后一個(gè)子節(jié)點(diǎn)，并返回該子節(jié)點(diǎn)。如需向 HTML DOM 添加新元素，您首先必須創(chuàng)建該元素，然后把它追加到已有的元素上。
js演示代碼：
var a=document.getElementById('first_form');
var textnode=document.createTextNode("慎重選擇");
a.appendChild(textnode)2 element.getAttribute(para) 返回元素節(jié)點(diǎn)的指定屬性值。
js演示代碼：
var a=document.getElementById('first_form');
console.log(a.getAttribute('name')) //控制臺(tái)3 element.getAttributeNode(para) 返回指定的屬性節(jié)點(diǎn)。
js演示代碼：
var a=document.getElementById('first_form');
console.log(a.getAttributeNode('name')) //控制臺(tái)4 element.getElementsByTagName(para) 返回?fù)碛兄付?biāo)簽名的所有子元素的集合。
js演示代碼：
var a=document.getElementById('first_form');
console.log(a.getElementsByTagName('input')) //控制臺(tái)5 element.hasAttribute(para) 如果元素?fù)碛兄付▽傩?，則返回true，否則返回 false。
js演示代碼：
var a=document.getElementById('first_form');
console.log(a.hasAttribute('name')) //控制臺(tái)6 element.insertBefore(insertNode,appointedNode) 在指定的已有的子節(jié)點(diǎn)之前插入新節(jié)點(diǎn)。
js演示代碼：
var a=document.getElementById('first_form');
var inputList=document.getElementsByTagName('input');
var newNode=document.createElement('input');
var newNode2=document.createTextNode('天馬流星拳');
var br=document.createElement('br');
newNode.type='radio';
newNode.name='gongfa';
newNode.value='tmlxq';
a.insertBefore(newNode,inputList[2]);
a.insertBefore(newNode2,inputList[3]);
a.insertBefore(br,inputList[3]);7 element.removeAttribute() 從元素中移除指定屬性。
js示例代碼：
var a=document.getElementById('first_form');
a.removeAttribute('name');
console.log(a.hasAttribute('name'))8 element.removeChild() 從元素中移除子節(jié)點(diǎn)。移除的節(jié)點(diǎn)雖然不在文檔樹中了，但其實(shí)還在內(nèi)存中，可以隨時(shí)被引用。
js示例代碼：
var a=document.getElementById('first_form');
a.removeChild(a.childNodes[3]);9 element.replaceChild(newNode,replaceNode) 把指定節(jié)點(diǎn)替換為新節(jié)點(diǎn)。
10 element.setAttribute(attrName,attrValue) 把指定屬性設(shè)置或更改為指定值。
js示例代碼：
var a=document.getElementById('first_form');
a.setAttribute('name','shaolinsi');
console.log(a.name)11 element.setAttributeNode() 修改指定屬性節(jié)點(diǎn)
js示例代碼：
var a=document.getElementById('first_form');
var attr = document.createAttribute('id');
attr.value='the_first';
a.setAttributeNode(attr);
console.log(a.id)12 nodelist.item() 返回 NodeList 中位于指定下標(biāo)的節(jié)點(diǎn)。
js示例代碼：
var a=document.getElementsByTagName('input')
console.log(a.item(2))聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2024 51dongshi.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
