HTML DOM對象的屬性和方法介紹

来源:http://www.cnblogs.com/deardashi/archive/2017/01/18/6297881.html
-Advertisement-
Play Games

HTML DOM對象的屬性和方法介紹 DOM 是 Document Object Model（文檔對象模型）的縮寫。 DOM（文檔對象模型）是針對HTML和XML文檔的一個API（應用程式編程介面），它允許程式和腳本動態地訪問和更新文檔的內容，結構和樣式。 W3C DOM 標準被分為 3 個不同的部 ...


HTML DOM對象的屬性和方法介紹

DOM 是 Document Object Model（文檔對象模型）的縮寫。

DOM（文檔對象模型）是針對HTML和XML文檔的一個API（應用程式編程介面），它允許程式和腳本動態地訪問和更新文檔的內容，結構和樣式。

W3C DOM 標準被分為 3 個不同的部分：

  • 核心 DOM - 針對任何結構化文檔的標準模型
  • XML DOM - 針對 XML 文檔的標準模型
  • HTML DOM - 針對 HTML 文檔的標準模型

HTML DOM 定義了所有 HTML 元素對象的屬性，以及訪問它們的方法，我們可以通過 Javascript 獲取，修改，添加和刪除 HTML 元素。

HTML DOM 對象有幾種類型：

1.Document 類型

在瀏覽器中，Document 對象表示整個 HTML 文檔。

1.1屬性

  • 引用文檔的子節點

documentElement

var html = document.documentElement;    //取得對<html>元素的引用

body

var body = document.body;    //取得對<body>元素的引用
  • 獲取文檔信息

title

通過 title 屬性可以訪問當前文檔的標題，也可以修改當前文檔的標題。

var originalTitle = document.title;    //返回當前文檔的標題
document.title = "New title";    //修改當前文檔的標題

URL

該屬性返回當前頁面完整的 URL，也就是瀏覽器地址欄中的全部地址信息。

比如我打開了一個頁面，瀏覽器地址欄中的信息顯示如下：

http://www.cnblogs.com/cqhaibin/p/6291640.html

這些信息就是當前文檔完整的 URL。 

var url = document.URL;    //返回當前文檔完整的URL

domain

該屬性返回當前文檔的伺服器功能變數名稱。

還是上面的地址，功能變數名稱就是 www.cnblogs.com。

var domain = document.domain;    //返回當前文檔的功能變數名稱

referrer

該屬性包含著鏈接到當前文檔的源頁面的 URL。

比如 A 頁面上有個超鏈接，超鏈接指向 B 頁面，我們在 A 頁面點擊了這個超鏈接，於是打開了 B 頁面，此時，B 頁面的 referrer 屬性值就是 A 頁面的完整 URL。但 A 頁面並不是通過點擊其他超鏈接打開的，所以 A 頁面的 referrer 屬性值是空字元串 ""。

var referrer = document.referrer;    //返回鏈接到當前頁面的源頁面的URL

lastModified

var lastModified = document.lastModified;    //返回當前文檔最後被修改的日期和時間

還是以 http://www.cnblogs.com/cqhaibin/p/6291640.html 這個頁面為例，在控制台輸入以下代碼：

document.lastModified;    //輸入這行代碼
"01/17/2017 11:58:34"    //返回的信息

cookie

這個屬性可以訪問和設置與當前文檔相關的所有 cookie。

var cookie = document.cookie;    //返回與當前文檔相關的所有cookie

1.2 方法

  • 查找元素

getElementById()

該方法接受一個參數，即希望獲取的元素的 ID 名稱。找到相應的元素後會返回該元素。

<p id="p">some text</p>

var p = document.getElementById("p:);    //取得對 p 元素的引用

getElementsByTagName()

該方法接受一個參數，即希望獲取的元素的標簽名。

返回的是一個 HTMLCollection 對象，這個對象包含了帶有指定標簽名的所有元素。該對象有 length 屬性。

要訪問 HTMLCollection 對象中的某項，可以用方括弧語法或 item() 方法或 namedItem() 方法。

可以向方括弧內傳入數字或者字元串。在後臺，對數字索引調用 item() 方法，對字元串索引調用 namedItem() 方法。

namedItem() 方法，接受一個參數，即元素的 name 特性值。返回帶有給定 name 特性的元素。如果有多個元素 name 特性值相同，只返回第一個元素。

<img src="FuckJavaScript.gif" name="fc" />
<img scr="ComeOn.gif" />
<img src="OnMyGod.gif" />

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ul>

var images = document.getElementsByTagName('img');    //取得對所有<img>元素的引用

//訪問某項
alert(images.length);             //"3"
alert(images[0]);                 //返回第一個<img>元素
alert(images["fc"]);              //返回第一個<img>元素
alert(images.item(0));            //返回第一個<img>元素
alert(images.namedItem("fc"));    //返回第一個<img>元素

getElementsByName()

這個方法接受一個參數，即 name 屬性的值，返回帶有給定 name 屬性值的所有元素。常用此方法取得單選按鈕。

這個方法也會返回一個 HTMLCollection 對象。

<fieldset>
    <legend>你喜歡下列哪個品牌的手機</legend>
    <label><input type="radio" value="Apple" name="phone" />蘋果</label>
    <label><input type="radio" value="Huawei" name="phone" />華為</label>
    <label><input type="radio" value="OPPO" name="phone" />OPPO</label>
    <label><input type="radio" value="Xiaomi" name="phone" />小米</label>
    <label><input type="radio" value="Meizu" name="phone" />魅族</label>
</fieldset>

var brands = document.getElementsByName('phone');    //返回一個列表，包含所有 radio 元素
alert(brands[1].value);         //返回列表中第二個 radio 元素的 value 屬性的值
alert(brands.item(1).value);    //返回列表中第二個 radio 元素的 value 屬性的值

getElementsByClassName()

HTML 5 定義了該方法。

這個方法接受一個參數，即 class 特性值，返回帶有給定 class 特性的所有元素。

2.Node 類型

2.1 屬性

  • 基礎屬性

nodeType

該屬性表示元素的節點類型，返回一個數字。

不同類型節點的 nodeType 值不一樣。

類型 數值 說明 備註
ELEMENT_NODE 1 元素節點 常用
ATTRIBUTE_NODE 2 屬性節點 常用
TEXT_NODE 3 文本節點 常用
CDATA_SECTION_NODE 4 CDATA區段節點  
ENTITY_REFERENCE_NODE 5 實體引用名稱節點  
ENTITY_NODE 6 實體名稱節點  
PROCESSING_INSTRUCTION_NODE 7 處理指令節點  
COMMENT_NODE 8 註釋 節點 常用
DOCUMENT_NODE 9 文檔節點（又名根節點） 常用
DOCUMENT_TYPE_NODE 10 文檔類型節點  
DOCUMENT_FRAGMENT_NODE 11 文檔片段節點  
NOTATION_NODE 12 DTD聲明節點  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

nodeName

該屬性返回節點的名稱，是元素的標簽名。

返回的標簽名是大寫字母。

<ol id="rank">
    <li>第一名：張水水</li>
    <li>第二名：黃糊糊</li>
    <li>第三名：安莘婉</li>
</ol>

alert(document.getElementById('rank').nodeName);    //"OL"

nodeValue

該屬性返回節點的值，值取決於節點的類型。

ownerDocument

該屬性返回整個文檔對象。

在對返回來的對象進行第一個子節點檢測時，返回的是文檔聲明：<!DOCTYPE ………………………………>。

<ol id="rank">
    <li>第一名：張水水</li>
    <li>第二名：黃糊糊</li>
    <li>第三名：安莘婉</li>
</ol>
<p>some text</p>

var lists = document.getElementsByTagName("li");
var p = document.getElementsByTagName("p"); 

alert(document.getElementById('rank').ownerDocument);    //返回整個 Document 文檔對象
alert(lists[0].ownerDocument);    //返回整個 Document 文檔對象
alert(p[0].ownerDocument);        //返回整個 Document 文檔對象
alert(p[0].ownerDocument.firstChild);    //返回 DocumentType 對象，也就是文檔聲明 <!DOCTYPE ………………>
  • 作為父節點擁有的屬性

childNodes

該屬性返回一個 NodeList 對象。

NodeList 對象是一種類數組對象，保存著一組有序的節點，可以通過方括弧語法和 item() 方法訪問 NodeList 對象中的項。

<ol id="rank">
    <li>第一名：張水水</li>
    <li>第二名：黃糊糊</li>
    <li>第三名：安莘婉</li>
</ol>

var rank = document.getElementById("rank");    //獲取 ol 元素
alert(rank.childNodes.length);    //"7",返回 ol 元素的子節點個數

有的瀏覽器會把元素之間的空白處算作一個文本節點。

本例中 ol 元素後面的空白處（1個）和 li 元素後面的空白處（3個），算作文本節點，於是這4個空白文本節點加上3個 li 元素節點，一共是7個，所以 rank.childNodes.length 返回7。

但是，如果把上例中所有元素緊密相接，互相之間不留空白，則 length 值會不一樣。

//元素之間不留空白
<ol id="rank"><li>第一名：張水水</li><li>第二名：黃糊糊</li><li>第一名：安莘婉</li></ol>

var rank = document.getElementById("rank");    //取得對 ol 元素的引用
alert(rank.childNodes.length);    //f返回 "3"

firstChild

該屬性返回父節點的第一個子節點。

<ol id="rank"><li>第一名：張水水</li><li>第二名：黃糊糊</li><li>第三名：安莘婉</li></ol>

var rank = document.getElementById("rank");    //取得對 ol 元素的引用
alert(rank.firstChild);       //返回第一個 li 元素
alert(rank.childNodes[0]);    //返回第一個 li 元素

someNode.firstChild = someNode.childNodes[0]

上例中返回的是第一個 li 元素，即 <li>第一名：張水水</li>，要獲得第一個 li 元素的文本內容：第一名：張水水，可以用下麵的方法。

<ol id="rank"><li>第一名：張水水</li><li>第二名：黃糊糊</li><li>第三名：安莘婉</li></ol>

var rank = document.getElementById("rank");        //取得對 ol 元素的引用
alert(rank.firstChild.firstChild.nodeValue);       //"第一名：張水水"
alert(rank.childNodes[0].firstChild.nodeValue);    //"第一名：張水水"

lastChild

該屬性返回父節點的最後一個子節點。

<ol id="rank"><li>第一名：張水水</li><li>第二名：黃糊糊</li><li>第三名：安莘婉</li></ol>

var rank = document.getElementById("rank");        //取得對 ol 元素的引用

alert(rank.lastChild);                                 //返回最後一個 li 元素
alert(rank.childNodes[rank.childNodes.length - 1]);    //返回最後一個 li 元素

alert(rank.lastChild.firstChild.nodeValue);                                 //"第三名：安莘婉"
alert(rank.childNodes[rank.childNodes.length - 1].firstChild.nodeValue);    //"第三名：安莘婉"

someNode.lastChild = someNode.childNodes[someNode.childNodes.length - 1]

  • 作為子節點有用的屬性

parentNode

該屬性返回子節點的父節點。

<p>快過年了，說點什麼好呢？</p>
<ul>
    <li>新年快樂</li>
    <li>萬事如意</li>
    <li id="djb">最後祝你新年大吉吧</li>
</ul>

var djb = document.getElementById("djb");    //獲得對 id="djb" 的 li 元素的引用 
alert(djb.parentNode.nodeName);              //"UL"

previousSibling

在 childNodes 列表中每個節點相互之間都是同胞節點。

該屬性返回 childNodes 列表中該子節點的上一個同胞節點。

<p>快過年了，說點什麼好呢？</p>
<ul><li>新年快樂</li><li id="ruyi">萬事如意</li><li>最後祝你新年大吉吧</li></ul>

var ruyi = document.getElementById("ruyi");          //獲得對 id="ruyi" 的 li 元素的引用 
alert(ruyi.previousSibling.firstChild.nodeValue);    //"新年快樂"

nextSibling

該屬性返回 childNodes 列表中該子節點的下一個同胞節點。

<p>快過年了，說點什麼好呢？</p>
<ul><li>新年快樂</li><li id="ruyi">萬事如意</li><li>最後祝你新年大吉吧</li></ul>

var ruyi = document.getElementById("ruyi");    //獲得對 id="ruyi" 的 li 元素的引用 
alert(ruyi.nextSibling.firstChild.nodeValue);    //"最後祝你新年大吉吧"

2.2 方法

hasChildNodes()

如果指定的節點有子節點，該方法返回 true，若沒有子節點，則返回 false。

<input id="btn" type="button" value="Button" />
<ul id="words">
    <li>新年快樂</li>
    <li id="ruyi">萬事如意</li>
    <li>最後祝你新年大吉吧</li>
</ul>

var btn = document.getElementById("btn");    //獲得對 id="btn" 的引用
var words = document.getElementById("words");    //獲得對 id="words" 的 ul 元素的引用 

alert(btn.hasChildNodes());    //"false"
alert(words.hasChildNodes());    //"true"

appendChild()

該方法向 NodeList 列表中的末尾添加一個節點。

接收一個參數，即要添加的節點。

該方法返回新添加的節點。

//代碼
<ul id="words"><li>新年快樂</li><li>萬事如意</li><li>最後祝你新年大吉吧</li></ul>

//頁面顯示
    新年快樂
    萬事如意
    最後祝你新年大吉吧

var words = document.getElementById("words");    //獲得對 id="words" 的 ul 元素的引用 
var addLi = document.createElement("li");    //創建 li 元素
var liText = document.createTextNode("我是新增項，被放在元列表的末尾處");    //創建 li 元素的文本內容
addLi.append(liText);    //給 li 元素添加文本內容
words.appendChild(addLi);    //給 ul 元素添加新建的 li 元素

//刷新頁面
    新年快樂
    萬事如意
    最後祝你新年大吉吧
    我是新增項，被放在元列表的末尾處

insertBefore()

該方法向 NodeList 列表中指定位置之前插入節點，不局限於最後一位。

接收兩個參數，第一個是要插入的節點，第二個是指定位置的節點。如果第二個參數未指定，則會在列表末尾插入新節點。

該方法返回新插入的節點。

//代碼
<ul id="words"><li>新年快樂</li><li>萬事如意</li><li>最後祝你新年大吉吧</li></ul>

//頁面顯示
    新年快樂
    萬事如意
    最後祝你新年大吉吧

var words = document.getElementById("words");    //獲得對 id="words" 的 ul 元素的引用 
var addLi = document.createElement("li");    //創建 li 元素
var liText = document.createTextNode("我是新增項，被插在了列表的第二位置處");    //創建 li 元素的內容
addLi.append(liText);    //給 li 元素添加文本內容
words.insertBefore(addLi, words.childNodes[1]);    //把新建 li 元素插入到列表的第二個位置處

//刷新頁面
    新年快樂
    我是新增項，被插在了列表的第二位置處
    萬事如意
    最後祝你新年大吉吧

replaceChild()

該方法用一個新節點替換 NodeList 列表中的某個節點。

接收兩個參數，第一個是要插入的節點（這個節點可以是文檔中某個已存在的節點，或者是創建的新節點），第二個是要替換的節點。

該方法返回被替換的節點。

//代碼
<ul id="words"><li>新年快樂</li><li>萬事如意</li><li>最後祝你新年大吉吧</li></ul>

//頁面顯示
    新年快樂
    萬事如意
    最後祝你新年大吉吧

var words = document.getElementById("words");    //獲得對 id="words" 的 ul 元素的引用 
var addLi = document.createElement("li");    //創建 li 元素
var liText = document.createTextNode("我是新增項，替換了原列表的第項");    //創建 li 元素的文本內容
addLi.append(liText);    //給 li 元素添加文本內容
words.replaceChild(addLi, words.childNodes[1]);    //用新建 li 元素替換了原列表中第二項

//刷新頁面
    新年快樂
    我是新增項，替換了原列表的第二項
    最後祝你新年大吉吧

removeChild()

該方法移除 NodeList 列表中的某個節點。

接收一個參數，即要移除的節點。

返回移除的節點。

//代碼
<ul id="words"><li>新年快樂</li><li>萬事如意</li><li>最後祝你新年大吉吧</li></ul>

//頁面顯示
    新年快樂
    萬事如意
    最後祝你新年大吉吧

var words = document.getElementById("words");    //獲得對 id="words" 的 ul 元素的引用 
words.removeChild(words.firstChild);    //移除原列表的第一項

//刷新頁面
    萬事如意
    最後祝你新年大吉吧
  • 所有節點都有的方法

cloneNode()

該方法可以創建一個完全相同的副本。

接收一個布爾值參數，表示是否執行深複製。true 進行深複製；false 進行淺複製。

深複製，複製節點及其整個子節點樹；淺複製，只複製節點本身。

返回被覆制的節點。

normalize()

該方法刪除空的文本節點；把相鄰的文本節點合併為一個文本節點。

3.Element 類型

Element 類型用於表示 HTML 元素，提供了對元素標簽名，子節點和屬性的訪問。

3.1 屬性

id

設置或返回元素的元素的 id 屬性值。

title

設置或返回元素的元素的 title 內容。

lang

設置或返回元素的元素內容的語言代碼，很少使用

dir

設置或返回元素的語言的方向，ltr，左到右；rt，右到左。很少使用

className

設置或返回元素的 class 屬性的值。

tagName

返回元素的標簽名。

在 HTML 中，tagName 屬性的返回值始終是大寫的。

<p id="myP" class="para" title="text" lang="en" dir="ltr">Some Text</p>

var p = document.getElementById('myP');
alert(p.id);           //"myP"
alert(p.className);    //"para"
alert(p.title);        //"text"
alert(p.lang);         //"en"
alert(p.dir);          //"ltr"
alert(p.tagName);      //"P" 大寫

3.2 方法

document.createElement()

創建新元素。

接收一個參數，即要創建元素的標簽名。

返回新創建的元素。

//頁面空空

//寫代碼
var p = document.createElement("p");    //創建 p 元素
var pText = document.createTextNode("Some text");    //創建文本節點
p.appendChild(pText);    //給 p 元素添加文本節點
document.body.appendChild(p);    //給 body 元素添加 p 元素

//刷新頁面
Some text

getAttribute()

該方法取得元素的屬性。

接收一個參數，即需要獲得屬性值的屬性名稱。屬性名稱要用引號括起來。

返回指定屬性的值。如果指定屬性不存在，則返回 null。

<p id="myP" class="para" title="text" lang="en" dir="ltr">Some Text</p>

var p =document.getElementById("myP");
alert(p.getAttribute("id"));    //"myP"
alert(p.getAttribute("class"));    //"para"
alert(p.getAttribute("title"));    //"text"
alert(p.getAttribute("lang"));    //"en"
alert(p.getAttribute("dir"));    //"ltr"

setAttribute()

 該方法添加指定的屬性，併為其賦指定的值。

 接收兩個參數，第一個參數為要添加的屬性的名稱，第二個參數為要添加的屬性值。屬性名稱和屬性值都要用引號括起來。

 無返回值。

<p id="myP">Some Text</p>

var p =document.getElementById("myP");
alert(p.getAttribute("class"));    //"null"
p.setAttribute("class", "para");    //設置 class  屬性並賦值 "para"
alert(p.getAttribute("class"));    //"para"

removeAttribute()

該方法刪除指定的屬性。

接收一個參數，希望刪除指定屬性的名稱。屬性名稱要用引號括起來。

無返回值。

<p id="myP" class="para">Some Text</p>

var p =document.getElementById("myP");
alert(p.getAttribute("class"));    //"para"
p.removeAttribute("class");    //移除 class  屬性
alert(p.getAttribute("class"));    //"null"

4. Text 類型

方法

document.createTextNode()

該方法創建文本節點。

接收一個參數，即要插入的文本內容。

返回創建的文本節點。

<p id="myP"></p>

//頁面空空

//JS代碼
var p =document.getElementById("myP");    //創建 P 元素
var pText = document.createTextNode("Some text");    //創建文本節點
p.appendChild(pText);    //給 p 元素添加文本節點
document.body.appendChild(p);    //給 body 元素添加 p 元素

//刷新頁面
Some text

normalize()

如果父節點包含兩個或多個文本節點，父節點在調用了該方法後，會把所有文本節點合併為一個文本節點。

無參數。

splitText()

該方法會把一個文本節點分成兩個文本節點。

接收一個參數，參數為數字，為指定分割的位置值。

原來的文本節點將包括為從開始到分割位置之前的內容。

該方法返回一個新文本節點，包括從分割位置開始（包含分割位置的文本）到結束的內容。

5.Attribute 類型

Attributes 屬性包含一個 NamedNodeMap 對象，與 NodeList 類似，是一個動態集合。

一個元素的所有屬性節點都在這個集合中。 

NamedNodeMap 對象有 length 屬性，即一個元素所有屬性的個數。

5.1 屬性

name

該屬性返回指定屬性的名稱。

value

該屬性返回指定屬性的值。

specified

該屬性值是布爾值。

如果在文檔中設置了屬性值，則返回 true，如果是 DTD/Schema 中的預設值，則返回 false。

length

返回屬性列表中屬性節點的個數。

<p id="myP" class="para" title="text">Some Text</p>

var p =document.getElementById("myP");

console.log(p.attributes.length);    //3

console.log(p.attributes[1]);    //返回屬性列表中第二個屬性對象
console.log(p.attributes[1].name);    //"class"   
console.log(p.attributes[1].value);    //"para"

console.log(p.attributes["class"]);    //返回屬性列表中第二個屬性對象
console.log(p.attributes["class"].name);    //"class" 返回屬性列表中第二個屬性對象的名稱    
console.log(p.attributes["class"].value);    //"para"

console.log(p.attributes[1].specified);    //"true"

5.2 方法

getNamedItem()

接收一個參數，即想要返回的屬性節點的屬性名稱。

返回指定屬性名稱的屬性節點。

<p id="myP" class="para" title="text">Some Text</p>

var p =document.getElementById("myP");

console.log(p.attributes.getNamedItem("class"));    //返回屬性列表中 class 屬性節點
console.log(p.attributes.getNamedItem("class").name);    //"class"   
console.log(p.attributes.getNamedItem("class").value);    //"para"

//再來回顧前兩種訪問屬性節點列表中某個屬性節點的方法

//方括弧裡面跟索引號
console.log(p.attributes[1]);    //返回屬性列表中第二個屬性節點
console.log(p.attributes[1].name);    //"class"   
console.log(p.attributes[1].value);    //"para"

//方括弧裡面跟屬性名稱
console.log(p.attributes["class"]);    //返回屬性列表中 class 屬性節點
console.log(p.attributes["class"].name);    //"class"   
console.log(p.attributes["class"].value);    //"para"

removeNamedItem()

接收一個參數，即想要刪除的屬性節點的屬性名稱。

返回刪除的指定屬性名稱的屬性節點。

<p id="myP" class="para" title="text">Some Text</p>

var p =document.getElementById("myP");
alert(p.attributes["title"]);    //返回屬性 title 節點
p.attributes.removeNamedItem("title");    //移除 title 屬性節點
alert(p.attributes["title"]);    //"undifined"

document.createAttribute()    不贊成使用

該方法創建屬性節點。

接收一個參數，即要創建的屬性節點的名稱。

setNamedItem()

該方法向 NamedNodeMap 列表中添加或替換指定的屬性節點。

接收一個參數，即要添加的向 NamedNodeMap 列表中添加或替換指定的屬性節點。

如果此節點已存在，則將替換該節點，並返回被替換的節點，否則返回值是 null。

//p 元素有2個屬性節點
<p id="myP" class="para">Some Text</p>

var p =document.getElementById("myP");
alert(p.attributes.length);    //"2"
var attrT = document.createAttribute("title");    //創建屬性節點 title
attrT.value = "text";    //給 title 節點賦值
p.attributes.setNamedItem(attrT);    //給 p 元素的屬性列表中添加 title 屬性節點

//檢測添加的屬性節點
alert(p.attributes.length);    //"3"
alert(p.attributes["title"].value);    //"text"

一般開發人員用的最多的是 getAttribute()，setAttribute()，removeAttribute() 這些方法。

item()

接收一個參數，即想要訪問的屬性節點的索引數值。

返回位於指定索引的屬性節點。

<p id="myP" class="para" title="text">Some Text</p>

var p =document.getElementById("myP");
console.log(p.attributes.item(1));    //返回屬性列表中第二個屬性節點
console.log(p.attributes.item(1).name);    //"class"   
console.log(p.attributes.item(1).value);    //"para"


//再來回顧前三種訪問屬性節點列表中某個屬性節點的方法

//方括弧裡面跟索引號
console.log(p.attributes[1]);    //返回屬性列表中第二個屬性節點
console.log(p.attributes[1].name);    //"class"   
console.log(p.attributes[1].value);    //"para"

//方括弧裡面跟屬性名稱
console.log(p.attributes["class"]);    //返回屬性列表中 class 屬性節點
console.log(p.attributes["class"].name);    //"class"   
console.log(p.attributes["class"].value);    //"para"

//geyNamedItem()里跟屬性名稱
console.log(p.attributes.getNamedItem("class"));    //返回屬性列表中 class 屬性節點
console.log(p.attributes.getNamedItem("class").name);    //"class"   
console.log(p.attributes.getNamedItem("class").value);    //"para"

總結：

按數字索引訪問某項：element.attributes[number]，element.attributes.item(number)。

按字元串索引訪問某項：element.attributes[string]，element.attributes.getNamedItem(string)。

 

 

 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • es6筆記4^_^function
    一、function預設參數 二、rest參數 三、擴展運算符 四、箭頭函數 具有詞法作用域的 this this問題 第二種方法是用bind(this),即 但現在我們有了箭頭函數，就不需要這麼麻煩了： ...
  • 列表樣式
    1.board.wxml 2.board.js 3.board.wxss ...
  • js動畫（四）
    終於到了最後了，這裡要告一段落了，整了個js運動框架，咳咳咳，好冷 啊啊啊啊啊啊，這天氣。媽的，工資怎麼也不發，啊，說好的 人與人之間的信任呢？哎，氣誒，不到150字啊，又是這個梗。。怎麼辦？說些什麼呢？哦，就是今天在嘗試做那個，曲面陰影和翹邊 陰影的時候，碰到一個問題，就是a:after這個層，想 ...
  • 博客園的打賞功能
    引用： <script src="http://static.tctip.com/js/tctip.min.js"></script> <link type="text/css" rel="stylesheet" href="http://static.tctip.com/css/myRewards ...
  • 如何在Chrome粘貼圖片直接上傳
    背景 截圖或頁面複製圖片，可以直接通過Ctrl+v 粘貼上傳圖片 原理 操作：複製（截圖）=>粘貼=>上傳 監聽粘貼事件=>獲取剪貼板里的內容=>發請求上傳 瀏覽器：Chrome、IE11 Chrome瀏覽器 1、通過監聽粘貼事件，event有clipboardData屬性，且clipboardDa ...
  • localStorage的黑科技-js和css緩存機制
    一、發現黑科技的起因 今天在微信公眾號看到一篇技術博文，想用印象筆記收藏，所以發送了文章鏈接到pc上。然後習慣性地打開控制台，看看源碼，想瞭解下最近微信用了什麼新技術。 呵呵，以下勾起了我偵探的欲望。頁面載入後的異常點就是只載入了一個js，如下圖所示： 我很詫異，為什麼已經開啟了Disable ca ...
  • 初識JSON
    ▓▓▓▓▓▓ 大致介紹 JSON(JavaScript Object Notation JavaScript對象表示法),JSON是一種數據格式，不是一種編程語言。雖然它的名字中有JavaScript但是它卻不屬於JavaScript,就像Java和JavaScript的關係一樣。而且，並不是只有J ...
  • 如何自定義博客園樣式
    苦惱 每次看到別人的博客樣式都感覺很舒服，很好看。 當自己開通博客後，使用了預置的樣式也無法達到自己想要的頁面效果，怎麼辦？ 廢話不多說，直奔主題 如何設置博客園自定義的樣式 還有這樣的功能，我怎麼不知道，後來也是看到園友發表過類似的文章才知道的。 首先我們要在後臺設置tab頁里，找到博客皮膚，下拉 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類