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
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類