JavaScript——DOM知識

原創 風雨蕭條 2019-09-30 13:48

2014093009570421.gif

DOM定義

DOM（文檔對象模型，Document Object Model）是W3C組織開發的一套便於操作XML和HTML的JavaScript方法，其將XML和HTML抽象成文檔對象（Document），並將其中所有的標籤和內容都抽象成對象（節點），利用面向對象的思對XML和HTML的操作。其中 Document 對象是DOM的頂層節點。

XML（擴展標記語言，Extensible Markup Language），主要用於信息的存儲和傳送，HTML也是一種XML。

DOM組成

  • DOM核心：針對任何結構化文檔的標準模型。

  • XML DOM：針對 XML 文檔的標準模型。

  • HTML DOM：針對 HTML 文檔的標準模型。

XML DOM和HTML DOM的關係

XML DOM 是：用於 XML 的標準對象模型，用於 XML 的標準編程接口，中立於平臺和語言的 W3C 標準。

XML DOM 定義了所有 XML 元素的對象和屬性，以及訪問它們的方法（接口）。

換言之：XML DOM 是用於獲取、更改、添加或刪除 XML 元素的標準。

HTML DOM 是：HTML 的標準對象模型，HTML 的標準編程接口的 W3C 標準。

HTML DOM 定義了所有 HTML 元素的對象和屬性，以及訪問它們的方法。

換言之，HTML DOM 是關於如何獲取、修改、添加或刪除 HTML 元素的標準。

其中，HTML DOM 是 XML DOM 的擴展，換言之，XML DOM 的方法均可以使用在HTML中，而反過來，HTML DOM 的方法不可以使用在XML中。

DOM樹與節點

1. DOM樹

對於HTML文檔，DOM將所有的標籤全部抽象成節點，並且節點間有嚴格的等級關係，以此形成一個DOM樹。

如：

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title>Demo</title></head><body>    <h1>DOM Lesson one</h1>    <p align="center">Hello world!</p></body></html>

其對應的DOM樹：

spacer.gif

其中，每一行都是兄弟節點，綠色線條代表父子關係，而紅色線條也是父子關係的一種，但是無法通過父親查找孩子而找到。

2. 節點

2.1 節點分類

由DOM樹可見，節點分爲三種：元素節點（標籤），屬性節點和文本節點。

2.2 節點屬性

nodeName，nodeValue，nodeType

具體如下：

節點類型/元素nodeNamenodeValuenodeType
元素節點標籤名不可用1
屬性節點屬性名屬性的值2
文本節點#text文本內容3
document#document不可用9

2.3 節點關係

spacer.gif

2.4 節點操作

操作目標節點的對象添加刪除修改查詢
當前節點document.createElement(name)
node.setAttribute(name,value)		不可用node.replaceNode(newNode)document.getElementById(id)
document.getElementsByName(name)
document.getElementsByTagName(tagName)
父節點node.appendChild(newNode)node.removeChild(cNode)node.replaceChild(newNode,oldNode)參見節點關係

綠色部分爲HTML DOM方法。

DOM的使用

1. 基本屬性與方法

  • nodeName：返回節點的名稱，依據其類型。

  • nodeType：返回節點的類型。

  • attributes：返回元素的屬性。

  • childNodes：返回元素的子節點的 NodeList。

  • firstChild：返回元素的首個子節點。

  • lastChild：返回元素的最後一個子節點。

  • parentNode：返回元素的父節點。

  • nextSibling：返回元素之後緊跟的節點。

  • previousSibling：返回元素之前緊隨的節點。

  • textContent：設置或返回元素及其後代的文本內容。

  • innerTest：設置或返回元素後代的文本內容。

  • innerHTML：設置或返回元素後代的內容。[HTML DOM]

  • hasAttribute(name)：返回元素是否擁有指定的屬性。

  • hasAttributes()：返回元素是否擁有屬性。

  • hasChildNodes()：返回元素是否擁有子節點。

  • createAttribute(node)：創建屬性節點。

  • createElement(node)：創建元素節點。

  • createTextNode(node)：創建文本節點。

  • appendChild(node)：向節點的子節點列表末尾添加新的子節點。

  • cloneNode(include_all:true,false)：克隆節點。

  • removeAttribute(name)：刪除指定的屬性。

  • removeChild(node)：刪除子節點。

  • replaceNode(newNode)：替換節點。[僅IE]

  • replaceChild(newNode, oldNode)：替換子節點。

  • getElementById(id)：找到具有指定id的子孫元素。[HTML DOM]

  • getElementsByName(name)：找到具有指定name的子孫元素。[HTML DOM]

  • getElementsByTagName(name)：找到具有指定標籤名的子孫元素。

  • getAttribute(name)：返回屬性的值。

  • setAttribute()：添加新屬性。

XML DOM屬性

  • node.innerText;

  • node.firstChild.nodeValue;

  • node.lastChild.nodeValue;

  • node.childNodes[0].nodeValue;

  • node.textContent;[IE8]

HTML DOM屬性

  • node.innerHTML;

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title>讀取指定的內容 </title>    <script type="text/javascript">    function _getLi() {        var bjNode = document.getElementById("bj");        var _childNodes = bjNode.childNodes;        for (var i = 0; i < _childNodes.length; i++) {        	// 獲取所有子節點，包括暗部（不顯示在網頁中的空格和製表符等）            var n = _childNodes[i];            // 如果子節點爲元素，則獲取改元素標籤中的文本            if (n.nodeType == 1) {                alert(n.childNodes[0].nodeValue);            }        }    }    </script></head><body>    <ul>        <li id="bj" value="beijing">            北京            <h1>海淀</h1> 奧運        </li>        <li id="sh" value="shanghai">            上海        </li>        <br/>        <input type="button" value="li取值" onclick="_getLi()" />    </ul></body></html>

獲取select下面option的文本內容。

HTML：

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title>Demo</title>    <script type="text/javascript" src="js.js"></script></head><body>    <select name="edu" id="edu">        <option value="本科1">本科</option>        <option value="專科2">專科</option>        <option value="高中3">高中</option>        <option value="小學4">小學</option>        <option value="幼兒園5">幼兒園</option>    </select></body></html>

方法1：獲取select對象，獲取childNodes，注意暗部。

var _selObj = document.getElementByTagName("select")[0];var _childNodes = _selObj.childNodes;for (var i = 0; i < _childNodes.length; i++) {    var n = _childNodes[i];    // n可能獲取到暗部，需要判斷排除    if (n.nodeType == 1) {        alert(n.firstChild.nodeValue + " : " + n.getAttribute("value"));    }}

方法2：直接獲取option對象集合

var optNodes = document.getElementsByTagName("option");for (var i = 0; i < optNodes.length; i++) {    var n = optNodes[i];    alert(n.getAttribute("value"));}

獲取select對象，並通過該對象的特有方法options直接獲取option的對象集合，避免了暗部的影響。

var optNodes = document.getElementById("edu").options;for (var i = 0; i < optNodes.length; i++) {    var n = optNodes[i];    alert(n.getAttribute("value"));}

HTML：

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title>替換節點內容</title>    <script type="text/javascript" src="js.js"></script></head><body>    <ul>        <li id="tar" onclick="_changeNode()">點這裏</li>        <li>湖南</li>        <li>山東</li>    </ul>    <ul>        <li id="game">打<span style="color:red">灰</span>機</li>        <li>抓泥鰍</li>        <li>鬥地主</li>    </ul></body></html>

function _changeNode() {    //1. 獲取兩個節點的對象    var tarNode = document.getElementById("tar");    var gameNode = document.getElementById("game");    //2 替換節點    //注意：當替換節點時，新節點將出現在被替換的位置，原位置將消失。    // 通過當前節點替換    tarNode.replaceNode(gameNode); // [僅IE]    // 通過父節點替換    //tarNode.parentNode.replaceChild(gameNode, tarNode);}

function _changeNode() {    //1. 獲取兩個節點的對象    var tarNode = document.getElementById("tar");    //2. 克隆節點    // cloneNode(true/false)，true：包括子節點。false：不包括子節點（文本節點）。    // 注意：當使用clone節點的時候，無論參數是true還是false都會把屬性一起克隆，所以可能出現的是相同id的節點，所以不推薦使用克隆方法。    var gameNode = document.getElementById("game").cloneNode(true);    tarNode.replaceNode(gameNode); // [僅IE]    alert("gameNode clone id is " + gameNode.getAttribute("id"));    var oldgameNode = document.getElementsByTagName("li")[3];    alert("oldgaemNode id is " + oldgameNode.getAttribute("id"));}

效果：

spacer.gif

HTML：

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title>添加節點</title>    <script type="text/javascript" src="js.js"></script></head><body>    <input type="button" value="添加選項" onclick="_addOptions()" />    <select>        <option>博士</option>        <option>碩士</option>        <option>本科</option>    </select></body></html>

function _addOptions() {    var selObj = document.getElementsByTagName("select")[0];    var optNode = document.createElement("option"); // 創建元素節點    var txtNode = document.createTextNode("小學"); // 創建文本節點    optNode.appendChild(txtNode); // 給optNode添加子節點（文本節點)    selObj.appendChild(optNode); // 給selObj添加子節點（option節點）}

function _addOptions() {    var selObj = document.getElementsByTagName("select")[0];    selObj.innerHTML += "<option>小學</option>";}

function _addOptions() {    var selObj = document.getElementsByTagName("select")[0];    // option(text, value, defaultSelected, selected)    // text：顯示的文本    // value：屬性value的值    // defaultSelected：初始化後選中的狀態（true/false）    // selected：當前選中的狀態（true/false)    var optNode = new Option("小學", "小學", true, true); // 創建了一個Option對象    selObj.add(optNode);}

效果：

spacer.gif

7. 表格動態增刪

HTML：

<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8"/>
<title>添加節點</title>
<scripttype="text/javascript"src="js.js"></script>
</head>
<body>
<tablealign="center"cellpadding="10"cellspacing="3">
<tr>
<td>姓名：
<inputtype="text"id="username"/>
</td>
<td>Email:
<inputtype="text"id="email"/>
</td>
<td>年齡:
<inputtype="text"id="age"/>
</td>
</tr>
<tr>
<tdcolspan="3"align="center">
<inputtype="button"value="添加"onclick="_addTR()"/>
</td>
</tr>
</table>
<br/>
<br/>
<br/>
<hr/>
<tableid="tabInfo"align="center"width="500"border="1">
<tr>
<td>姓名</td>
<td>Email</td>
<td>年齡</td>
<td>操作</td>
</tr>
</table>
</body>
</html>

7.1 使用XML DOM方法

function _addTR(){
// 獲取輸入框信息
var tablenode = document.getElementById("tabInfo");
var uname = document.getElementById("username").value;
var email = document.getElementById("email").value;
var age = document.getElementById("age").value;
// 創建一行
var trNode = document.createElement("tr");
// 創建出一個單元格
var unameTd = document.createElement("td");
var emailTd = document.createElement("td");
var ageTd = document.createElement("td");
var dropTd = document.createElement("td");
// 創建文本節點和刪除節點
var unameTxt = document.createTextNode(uname);
var emailTxt = document.createTextNode(email);
var ageTxt = document.createTextNode(age);
var dropButton = document.createElement("input");
    dropButton.setAttribute("type","button");
    dropButton.setAttribute("value","刪除");
    dropButton.setAttribute("onclick","_del(this);");
// 逐級添加
    unameTd.appendChild(unameTxt);
    emailTd.appendChild(emailTxt);
    ageTd.appendChild(ageTxt);
    dropTd.appendChild(dropButton);
    trNode.appendChild(unameTd);
    trNode.appendChild(emailTd);
    trNode.appendChild(ageTd);
    trNode.appendChild(dropTd);
    tablenode.appendChild(trNode);
}
function _del(obj){
// 找到tr節點
var trNode = obj.parentNode.parentNode;
// 使用tr節點的父節點，刪除tr節點
    trNode.parentNode.removeChild(trNode);
}

7.2 使用HTML DOM方法

function _addTR() {    var tablenode = document.getElementById("tabInfo");    var uname = document.getElementById("username").value;    var email = document.getElementById("email").value;    var age = document.getElementById("age").value;    // 創建一行    var trNode = tablenode.insertRow();    // 創建一個單元格    var unameTd = trNode.insertCell();    var emailTd = trNode.insertCell();    var ageTd = trNode.insertCell();    var dropTd = trNode.insertCell();    // 爲單元格添加內容    unameTd.innerHTML = uname;    emailTd.innerHTML = email;    ageTd.innerHTML = age;    dropTd.innerHTML = "<input type='button' onclick='_del(this)' value='刪除' />";}function _del(obj) {    // 拿到table節點    var tablenode = document.getElementById("tabInfo");    // 找到tr節點    var trNode = obj.parentNode.parentNode;    // 使用HTML DOM的deleteRow方法    tablenode.deleteRow(trNode.rowIndex);}

當然，也可以全部用innerHTML來實現[IE10+]：

function _addTR(){
var tablenode = document.getElementById("tabInfo");
var uname = document.getElementById("username").value;
var email = document.getElementById("email").value;
var age = document.getElementById("age").value;
// 使用innerHTML添加全部內容
    tablenode.innerHTML +="<tr><td>"+ uname +"</td><td>"+ email +"</td><td>"+ age +"</td><td><input type='button' onclick='_del(this)' value='刪除' /></td></tr>";
}

效果：

spacer.gif

8. 全選/全不選/反選

HTML：

<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8"/>
<title>添加節點</title>
<scripttype="text/javascript"src="js.js"></script>
</head>
<body>
<h1>請選擇你的愛好：</h1>
<labelfor="all">全選/全不選</label>
<inputid="all"type="checkbox"name="hobbys"onclick="_chkSelectAll(this.checked)"/>
<br/>
<inputid="foot"type="checkbox"name="hobby"value="football"/>
<labelfor="foot">足球</label>
<inputid="bask"type="checkbox"name="hobby"value="basketball"/>
<labelfor="bask">籃球</label>
<inputid="swim"type="checkbox"name="hobby"value="swim"/>
<labelfor="swim">游泳</label>
<inputid="sing"type="checkbox"name="hobby"value="singing"/>
<labelfor="sing">唱歌</label>
<br/>
<inputtype="button"value="全選"onclick="_chkSelectAll(true)"/>
<inputtype="button"value="全不選"onclick="_chkSelectAll(false)"/>
<inputtype="button"value="反選"onclick="_reverseChecked()"/>
</body>
</html>

JavaScript[HTML DOM方法]：

function _chkSelectAll(chk){
//拿到所有名字爲hobby的checkbox對象
var hobbyarr = document.getElementsByName("hobby");
for(var i =0; i < hobbyarr.length; i++){
        hobbyarr[i].checked = chk;
}
}
function _reverseChecked(){
//拿到所有名字爲hobby的checkbox對象
var hobbyarr = document.getElementsByName("hobby");
for(var i =0; i < hobbyarr.length; i++){
        hobbyarr[i].checked =!hobbyarr[i].checked;
}
}

效果：

spacer.gif

9. 下拉列表左右移動

HTML：

<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8"/>
<title>替換節點內容</title>
<scripttype="text/javascript"src="js.js"></script>
</head>
<body>
<tablealign="center">
<tr>
<td>
<selectsize="10"id="left">
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
<option>選項4</option>
<option>選項5</option>
<option>選項6</option>
<option>選項7</option>
<option>選項8</option>
</select>
</td>
<td>
<inputtype="button"value="->" onclick="_removeLeft()" />
<br/>
<inputtype="button"value="=>" onclick="_removeLeftAll()" />
<br/>
</td>
<td>
<selectsize="10"id="right">
<option>選項9</option>
</select>
</td>
</tr>
</table>
</body>
</html>

9.1 使用XML DOM的childNodes屬性

function _removeLeft(){
var leftSel = document.getElementById("left");
var rightSel = document.getElementById("right");
var optIdx = leftSel.selectedIndex;
// 使用XML DOM的childNodes屬性需注意暗部的避免。
// 這裏使用變量count記錄真正的選項索引，i爲包括暗部的索引。
var count =0;
var i =0;
while(i < leftSel.childNodes.length){
if(leftSel.childNodes[i].nodeType ==1){
if(count == optIdx){
var optNode = leftSel.childNodes[i];
break;
}
    		count++;
}
    	i++;
}
    rightSel.appendChild(optNode);
}
function _removeLeftAll(){
// 拿到左右兩側下拉列表對象
var leftSel = document.getElementById("left");
var rightSel = document.getElementById("right");
// 遍歷左側下拉列表項
// 這裏使用XML DOM的childNodes屬性，會將所有的暗部一併添加到右側
while(leftSel.childNodes.length >0){
    	rightSel.appendChild(leftSel.childNodes[0]);
}
}

9.2 使用HTML DOM的options屬性和add方法

function _removeLeft(){
var leftSel = document.getElementById("left");
var rightSel = document.getElementById("right");
// 獲取選中的索引號
var optIdx = leftSel.selectedIndex;
var optNode = leftSel.options[optIdx];
// 將對應索引號的項添加到右邊
    rightSel.add(optNode);
}
function _removeLeftAll(){
var leftSel = document.getElementById("left");
var rightSel = document.getElementById("right");
// 只要左邊列表不爲空，就將列表的第一項加到右邊
while(leftSel.options.length >0){
        rightSel.add(leftSel.options[0]);
}
}

效果：

spacer.gif

HTML DOM之CSS（style）屬性的使用

1. 概述

CSS樣式對象均在HTML DOM節點的style屬性中設置，具體可以查看相關文檔。

2. 案例

顏色切換

<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8"/>
<title>顏色切換</title>
</head>
<body>
<spanid="a"style="background-color:blue">haha</span>
<spanid="b"style="background-color:red">hehe</span>
<scripttype="text/javascript">
var b =false;
function _func(){
    	b =!b;
if(b){
    		document.getElementById("a").style.backgroundColor ="red";
    		document.getElementById("b").style.backgroundColor ="blue";
}else{
     		document.getElementById("b").style.backgroundColor ="red";
    		document.getElementById("a").style.backgroundColor ="blue";
}
}
var inter = setInterval(_func,1000);
</script>
</body>
</html>

效果

spacer.gif

漂浮廣告

<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8"/>
<title>漂浮廣告</title>
<scripttype="text/javascript">
function _rand(){
var randx =Math.random()* screen.width;
var randy =Math.random()* screen.height -50;
var tar = document.getElementById('img').style;
		tar.top = randy +"px";
		tar.left = randx +"px";
}
	setInterval(_rand,500);
</script>
</head>
<body>
<span>漂浮廣告演示</span>
<imgsrc="piaofu.jpg"id="img"width="50px"height="50px"style="position:absolute"/>
</body>
</html>

轉載至：http://blog.csdn.net/jacobvv/article/details/42845517

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

DOM操作小結

DOM的基本操作 節點的增加 增加元素節點：document.createElement(’ ‘) 增加文本節點：document.createTextNode (’ ‘) 增加註釋節點： document.createComme

它山之石，可以攻玉。 2020-07-07 06:40:17

DOM-4

正課:  1. ***HTML DOM常用對象:     Form 2. BOM 1. ***HTML DOM常用對象:     Form: 代表一

yji534123343 2020-07-05 01:11:36

DOM CSS 選擇器權重

1. 行內樣式 10002. ID 選擇器 1003. 類，僞類選擇器，屬性選擇器 104. 元素，僞元素選擇器 15. 通配符*，子選擇器， 相鄰選擇器 0

jerny2017 2020-07-03 21:10:25

dom4j 的小小測試

@Test public void gogo() throws IOException{ InputStream in = this.getClass().getClassLoader() .getResourceAsStr

fawen18 2020-07-02 16:17:35

Web Event接口

一、定義：Event接口表示在DOM中發生的任何事情；一些是用戶生成的（如用戶點擊鼠標，按下鍵盤等，都會生成一個事件），一些是由其它API生成的（如動畫結束事件，過渡結束，視頻播放被暫停等...）。事件通過由外部源觸發，也可由編程方式觸發

feral_coder 2020-07-02 15:43:53

JS中DOM0級和DOM2級以及IE的區別

DOM0級和DOM2級在綁定事件上的區別 一、dom0級 1、綁定方式（用html的方式綁定） 使用html屬性的方式綁定，如果要調用這個函數，這個函數在js中就要處於全局作用域<input type="button" id = "b

宇宙超级美少女 2020-07-01 00:43:17

DOM動態創建元素 有兼容性問題li a

 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無標題文檔</titl

难瘦不难过 2020-06-28 13:45:39

Dom和XML的二級聯動菜單詳解及其源代碼

  Dom和XML的二級聯動菜單詳解及其源代碼   Xml文件： cities2.xml <?xml version="1.0" encoding=

向日葵的眼里只有太阳 2020-06-27 13:17:19

學習DOM第四節——事件

1.綁定事件的方法 0級事件處理程序 //方式一 div.onclick = function() { console.log('a'); } //方式二 <div style = "width: 100px; heigh

是会飞的猪 2020-06-26 05:42:11

關於使用JS動態修改CSS樣式問題

【轉】關於使用js動態修改樣式問題  有時我們需要動態生成效果，那麼就需要對頁面的css進行各種處理，進而達到一些樣式的改變。如動畫，拖放等效果。所以使用JS正確的來對頁面樣式修改是灰常重要的。 1.修改標籤的clas

yuanmei1986 2020-06-26 00:27:02

重溫js的幾個字符串函數

按：後來我又把vbs中幾個類似的函數也總結了一下《VBS（VB Scritp/ASP）幾個容易混淆的字符串函數》 技術心得：重溫js的幾個字符串函數 因爲工作需要，得處理一堆checkbox的值，經過處理之後是"101,113,69,",

xpnew 2020-06-25 21:01:09

瀏覽器頁面渲染基本過程

       像素完美（Pixel Perfection）、分辨率無關（Resolution Independent）和多平臺體驗一致性是設計師們的追求。 可訪問性（Accessability）、加載性能和重構靈活性則是前端工程師們關心

pxy_Shineyo 2020-06-25 09:53:57

JavaScript-4.5-BOM 與 DOM-案例

JavaScript-4.5-BOM 與 DOM-案例案例一：簡單的留言板 案例 一：簡單的留言板 輸入暱稱和評論內容，單擊“提交內容”按鈕，可以將最新的評論插入到已有評論的下方 暱稱和評論內容爲空時，不能提交 提交後獲取當前時

qwh_python 2020-06-25 02:34:32

Javascript學習筆記：DOM事件

1.HTML事件 直接在HTML元素標籤內添加事件，執行腳本。 <tag 事件=“執行腳本”></tag> 鼠標事件： <body> <div class='aaa bbb ccc'> <input type='butt

Zijeak 2020-06-24 17:58:03

Javascript-API-DOM-操作元素對象的屬性、文本內容、子元素、樣式、事件

DOM Document Object Model 文檔對象模型：作用就是對象的方式操作HTML和CSS樣式的 DOM中有哪些對象，這些對象有哪些屬性和方法。 DOM編程的步驟： 1、獲取元素對象。 2、操作元素對象的

good法乐 2020-06-24 14:05:12