1. 程式人生 > >DOM節點的屬性和方法

DOM節點的屬性和方法

HTML DOM Element 物件

HTML DOM 節點

在 HTML DOM (文件物件模型)中,每個部分都是節點:

  • 文件本身是文件節點
  • 所有 HTML 元素是元素節點
  • 所有 HTML 屬性是屬性節點
  • HTML 元素內的文字是文字節點
  • 註釋是註釋節點

Element 物件

在 HTML DOM 中,Element 物件表示 HTML 元素。

Element 物件可以擁有型別為元素節點、文字節點、註釋節點的子節點。

NodeList 物件表示節點列表,比如 HTML 元素的子節點集合。

元素也可以擁有屬性。屬性是屬性節點(參見下一節)。

google IE firefox safari opera
true true true true true

屬性和方法

1. accessKey

設定或返回元素的快捷鍵

快捷鍵規定啟用元素或使元素獲得焦點的快捷鍵。

註釋:在不同的瀏覽器中訪問快捷鍵的方式各有不同:

圖片不見了

不過在大多數瀏覽器中,可以將快捷鍵設定為其他組合。

提示:如果超過一個元素擁有相同的快捷鍵,那麼:

  • IE, Firefox: 啟用下一個被按下快捷鍵的元素
  • Chrome, Safari:啟用最後一個被按下快捷鍵的元素
  • Opera: 啟用第一個被按下快捷鍵的元素

瀏覽器支援

google IE firefox safari opera
true true true true true

用法

HTMLElementObject.accessKey=accessKey

<html>
<head>
    <script>
        function accesskey()
        {
            document.getElementById('w3s').accessKey="w"
        }
    
</script> </head> <body onload="accesskey()"> <a id="w3s" href="http://www.w3school.com.cn/">W3School</a> </body> </html>

2. appendChild()

向節點新增最後一個子節點

提示:如果您需要建立包含文字的新段落,請記得新增到段落的文字的文字節點,然後向文件新增該段落。您也可以使用 appendChild() 方法從一個元素向另一個元素中移動元素。

瀏覽器支援

google IE firefox safari opera
true true true true true

用法

node.appendChild(node)

引數

  • 必需
    • node 您希望新增的節點物件。
<html>
<head>
    <title>zsh</title>
</head>
<body>
    <div id="div"></div>
    <button onclick="Event()">點我吧</button>
</body>
    <script>
        function Event(){
            var Dom_p = document.createElement('p');
            var text = document.createTextNode("1213"); //Document中的物件例項 createTextNode
            Dom_p.appendChild(text);
            div.appendChild(Dom_p);
        }
    </script>
</html>

3. attributes

返回指定節點的屬性集合,即 NamedNodeMap

提示:您可以使用 length 屬性來確定屬性的數量,然後您就能夠遍歷所有的屬性節點並提取您需要的資訊。

瀏覽器支援

google IE firefox safari opera
true true true true true

註釋:在 Internet Explorer 8 以及更早的版本中,attributes 屬性會返回元素所有可能屬性的集合。

用法

node.attributes

<html>
<head>
    <title>zsh</title>
</head>
<body>
    <div id="div" class="di" div="dd"></div>
    <button onclick="Event()">點我吧</button>
</body>
    <script>
        function Event(){
            var Dom_p = document.createElement('p');
            var attr = div.attributes;
            var text = "";
            for(let i = 0; i< attr.length;i++){
                text += attr[i].nodeValue + "   ";
            }
            Dom_p.innerText += text;
            div.appendChild(Dom_p);
        }
    </script>
</html>

4. childNodes

返回節點的子節點集合,以 NodeList 物件

提示:您可以使用 length 屬性來確定子節點的數量,然後您就能夠遍歷所有的子節點並提取您需要的資訊。

瀏覽器支援

google IE firefox safari opera
true true true true true

用法

element.childNodes

<html>
<head>
    <title>zsh</title>
</head>
<body>
    <div id="div" class="di" div="dd"></div>
    <button onclick="Event()">點我吧</button>
</body>
    <script>
        function Event(){
            console.log(document.body.childNodes);
        }
    </script>
</html>

5. className

設定或返回元素的 class 屬性

瀏覽器支援

google IE firefox safari opera
true true true true true

用法

HTMLElementObject.className=classname

<html>
<head>
    <title>zsh</title>
</head>
<body>
    <div id="div" class="di" div="dd"></div>
    <button onclick="Event()">點我吧</button>
</body>
    <script>
        function Event(){
            div.className = "ddd"
        }
    </script>
</html>

6. clientHeight

返回元素的可見高度

瀏覽器支援

google IE firefox safari opera
true true true true true

用法

HTMLElementObject.clientHeight

<html>
<head>
    <title>zsh</title>
</head>
<body>
    <div id="div" class="di" div="dd"></div>
    <button onclick="Event()">點我吧</button>
</body>
    <script>
        function Event(){
            alert(div.clientHeight);
        }
    </script>
</html>

7. clientWidth

返回元素的可見高度

瀏覽器支援

google IE firefox safari opera
true true true true true

用法

HTMLElementObject.clientWidth

<html>
<head>
    <title>zsh</title>
</head>
<body>
    <div id="div" class="di" div="dd"></div>
    <button onclick="Event()">點我吧</button>
</body>
    <script>
        function Event(){
            alert(div.clientWidth);
        }
    </script>
</html>

8. cloneNode()

建立節點的拷貝,並返回該副本

cloneNode() 方法克隆所有屬性以及它們的值。

如果您需要克隆所有後代的屬性,請把 deep 引數設定 true,否則設定為 false。

瀏覽器支援

google IE firefox safari opera
true true true true true

用法

node.cloneNode(deep)

引數

  • 可選
    • deep 預設是 false。
      • 設定為 true,如果您需要克隆節點及其屬性,以及後代
      • 設定為 false,如果您只需要克隆節點及其後代
        返回值
<html>
<head>
    <title>zsh</title>
</head>
<body>
    <div id="div" class="di" div="dd"></div>
    <button onclick="Event()">點我吧</button>
</body>
    <script>
        function Event(){
            var cloneDiv = div.cloneNode();
            div.appendChild(cloneDiv)
        }
    </script>
</html>

9. compareDocumentPosition()

比較兩個節點,並返回描述它們在文件中位置的整數

返回值

  • 1:沒有關係,兩個節點不屬於同一個文件。
  • 2:第一節點(P1)位於第二個節點後(P2)。
  • 4:第一節點(P1)定位在第二節點(P2)前。
  • 8:第一節點(P1)位於第二節點內(P2)。
  • 16:第二節點(P2)位於第一節點內(P1)。
  • 32:沒有關係,或是兩個節點是同一元素的兩個屬性。

註釋:返回值可以是值的組合。例如,返回 20 意味著在 p2 在 p1 內部(16),並且 p1 在 p2 之前(4)。

瀏覽器支援

google IE firefox safari opera
true 9.0 true true true

用法

node.compareDocumentPosition(node)

引數

  • 必需
    • node 規定於當前節點作比較的節點
<html>
<head>
    <title>zsh</title>
</head>
<body>
    <div id="div" class="di" div="dd"></div>
    <button onclick="Event()" id="btn">點我吧</button>
</body>
    <script>
        function Event(){
            alert(div.compareDocumentPosition(btn));
        }
    </script>
</html>

10. contentEditable

設定或返回元素內容是否可編輯

提示:您也可以使用 isContentEditable 屬性來查明元素內容是否可編輯。

瀏覽器支援

google IE firefox safari opera
true true true true true

用法

HTMLElementObject.contentEditable

HTMLElementObject.contentEditable=true|false

<html>
<head>
    <title>zsh</title>
</head>
<body>
    <div id="div" class="di" div="dd"></div>
    <button onclick="Event()" id="btn">點我吧</button>
</body>
    <script>
        function Event(){
            div.contentEditable = true;
        }
    </script>
</html>

11. dir

設定或返回元素的文字方向

提示:Element需要設定dir屬性。

dir的屬性值

  • auto 自動
  • rtl 右
  • ltl 左

瀏覽器支援

google IE firefox safari opera
true true true true true

用法

HTMLElementObject.dir=text-direction

<html>
<head>
    <title>zsh</title>
</head>
<body>
    <div id="div" class="di" div="dd" dir=""></div>
    <button onclick="Event()" id="btn">點我吧</button>
</body>
    <script>
        function Event(){
            alert(div.dir);
        }
    </script>
</html>

12. firstChild

返回指定節點的首個子節點,以 Node 物件

註釋:在 HTML 中,文字本身是 HTML 元素的父節點,HEAD 和 BODY 是 HTML 元素的子節點。

瀏覽器支援

google IE firefox safari opera
true true true true true

用法

node.firstChild

<html>
<head>
    <title>zsh</title>
</head>
<body>
    <div id="div" class="di" div="dd" dir="">
        <p></p>
    </div>
    <button onclick="Event()" id="btn">點我吧</button>
</body>
    <script>
        function Event(){
            if(div.firstChild.nodeType == 3){
                console.log(div.childNodes[1]);
            }else{
                console.log(div.firstChild);
            }
        }
    </script>
</html>

13. getAttribute()

返回指定屬性名的屬性值

提示:如果您希望以 Attr 物件返回屬性,請使用 getAttributeNode。

瀏覽器支援

google IE firefox safari opera
true true true true true

用法

element.getAttribute(attributename)

引數

  • 必需
    • attributename 需要獲得屬性值的屬性名稱。
<html>
<head>
    <title>zsh</title>
</head>
<body>
    <div id="div" class="di" div="dd" dir="">
        <p></p>
    </div>
    <button onclick="Event()" id="btn">點我吧</button>
</body>
    <script>
        function Event(){
            alert(div.getAttribute('id'));
        }
    </script>
</html>

14. getAttributeNode()

返回指定屬性名的屬性值,以 Attr 物件

提示:如果您只需要返回屬性值,請使用 getAttribute。

瀏覽器支援

google IE firefox safari opera
true true true true true

用法

element.getAttributeNode(attributename)

引數

  • 必需
    • attributename 需要返回的屬性的名稱。
<html>
<head>
    <title>zsh</title>
</head>
<body>
    <div id="div" class="di" div="dd" dir="">
        <p></p>
    </div>
    <button onclick="Event()" id="btn">點我吧</button>
</body>
    <script>
        function Event(){
            alert(div.getAttributeNode('div').nodeValue);
        }
    </script>
</html>

15. getElementsByTagName()

返回具有指定標籤名的元素子元素集合,以 NodeList 物件

提示:引數值 “*” 返回元素的所有子元素。

瀏覽器支援

google IE firefox safari opera
true true true true true

用法

element.getElementsByTagName(tagname)

引數

  • 必需
    • tagname 需要獲得的子元素的標籤名。
<html>
<head>
    <title>zsh</title>
</head>
<body>
    <div id="div" class="di" div="dd" dir="">
        <p></p>
        <p></p>
    </div>
    <button onclick="Event()" id="btn">點我吧</button>
</body>
    <script>
        function Event(){
            alert(document.body.getElementsByTagName('p'));
        }
    </script>
</html>

16. hasAttribute()

如果存在指定屬性,則 hasAttribute() 方法返回 true,否則返回 false。

瀏覽器支援

google IE firefox safari opera
true 9.0 true true true

用法

element.hasAttribute(attributename)

引數

  • 必需
    • attributename 需要檢查是否存在的屬性名稱。
<html>
<head>
    <title>zsh</title>
</head>
<body>
    <div id="div" class="di" div="dd" dir="">
        <p></p>
        <p></p>
    </div>
    <button onclick="Event()" id="btn">點我吧</button>
</body>
    <script>
        function Event(){
            alert(div.hasAttribute('div'));
        }
    </script>
</html>

17. hasAttributes()

如果指定節點擁有屬性,則 hasAttributes() 方法返回 true,否則返回 false

如果指定節點不是元素節點,則返回值始終是 false。

瀏覽器支援

google IE firefox safari opera
true 9.0 true true true

用法

element.hasAttributes()

<html>
<head>
    <title>zsh</title>
</head>
<body>
    <div id="div" class="di" div="dd" dir="">
        <p></p>
        <p></p>
    </div>
    <button onclick="Event()" id="btn">點我吧</button>
</body>
    <script>
        function Event(){
            alert(div.hasAttributes());
        }
    </script>
</html>

18. hasChildNodes()

如果指定節點擁有子節點,返回 true,否則返回 false

瀏覽器支援

google IE firefox safari opera
true true true true true

用法

node.hasChildNodes()

<html>
<head>
    <title>zsh</title>
</head>
<body>
    <div id="div" class="di" div="dd" dir="">
    </div>
    <button onclick="Event()" id="btn">點我吧</button>
</body>
    <script>
        function Event(){
            alert(div.hasChildNodes());
        }
    </script>
</html>

19. id

設定或返回元素的 id

瀏覽器支援

google IE firefox safari opera
true true true true true

用法

HTMLElementObject.id=id

<html>
<head>
    <title>zsh</title>
</head>
<body>
    <div id="div" class="di" div="dd" dir="">
    </div>
    <button onclick="Event()" id="btn">點我吧</button>
</body>
    <script>
        function Event(){
            div.id = "div";
        }
    </script>
</html>

20. innerHTML

設定或返回元素的 inner HTML

提示:可以解析字串中的HTML標籤。

瀏覽器支援

google IE firefox safari opera
true true true true true

用法

HTMLElementObject.innerHTML=text

<html>
<head>
    <title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="">
</div>
<button onclick="Event()" id="btn">點我吧</button>
</body>
<script>
    function Event(){
        var htmlText = div.innerHTML;
        htmlText += "<strong>strong</strong><br/>".fontsize("18px");
        htmlText += "<strong>strong</strong>";
        div.innerHTML = htmlText;
    }
</script>
</html>

21. insertBefore()

在您指定的Element裡已有的子節點之前插入新的子節點

提示:如果您希望建立包含文字的新列表項,請記得建立文字節點形式的文字,以便追加到 LI 元素中,然後向列表插入這個 LI。您也可以使用 insertBefore 方法插入/移動已有元素。

瀏覽器支援

google IE firefox safari opera
true true true true true

用法

node.insertBefore(newnode,existingnode)

引數

  • 必需
    • newnode 需要插入的節點物件。
  • 可選
    • existingnode 在其之前插入新節點的子節點。如果未規定,則 報錯。
<html>
<head>
    <title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="">
</div>
<button onclick="Event()" id="btn">點我吧</button>
</body>
<script>
    function Event(){
        var text = document.createTextNode("dddddddd");
        div.insertBefore(text,div.childNodes[0])
    }
</script>
</html>

22. isContentEditable

isContentEditable 屬性返回元素的內容是否可編輯,該屬性為只讀

提示:請使用 contentEditable 屬性來改變元素的可編輯狀態。

瀏覽器支援

google IE firefox safari opera
11.0 5.5 3.0 3.2 10.6

用法

HTMLElementObject.isContentEditable

<html>
<head>
    <title>zsh</title>
</head>
<body>
<div id="div" class="di" div="dd" dir="">
</div>
<button onclick="Event()" id="btn">點我吧</button>
</body>
<script>
    function Event(){
        var text = document.createTextNode("dddddddd");
        div.insertBefore(text,div.childNodes[0])
    }
</script>
</html>

23. isDefaultNamespace()

如果指定的名稱空間是預設的, 方法返回 true,否則返回 false

瀏覽器支援

google IE firefox safari opera
true 9.0 true true true

用法

node.isDefaultNamespace(namespaceURI)

引數

  • 必需
    • namespace 需要檢查的名稱空間的 URI。
            
           

相關推薦

JS操作DOM元素屬性方法

Dom元素基本操作方法API,先記錄下,方便以後使用。    W3C DOM和JavaScript很容易混淆不清。DOM是面向HTML和XML文件的API,為文件提供了結構化表示,並定義瞭如何通過指令碼來訪 問文件結構。JavaScript則是用於訪問和處理DOM的語言。

SVG DOM常用屬性方法介紹(1)

12.2 SVG DOM常用屬性和方法介紹 將以Adobe SVG Viewer提供的屬性和方法為準,因為不同解析器對JavaScript以及相關的屬性和方法支援的程度不同,有些方法和屬性是某個解析器所特有的。SVG支援DOM2標準。 12.2.1 文件初始化相關 — ev

DOM節點屬性方法

HTML DOM Element 物件 HTML DOM 節點 在 HTML DOM (文件物件模型)中,每個部分都是節點: 文件本身是文件節點 所有 HTML 元素是元素節點 所有 HTML 屬性是屬性節點 HTML 元素內的文字是文字節點 註釋是

元素節點屬性方法

ntb div 節點 -c obj name ron func efi 元素節點的屬性 /* tagName innerHTML 雙標簽 valu

【轉】JavaScript 節點操作 以及DOMDocument屬性方法

表示 位置 clas 句柄 doc elements nta XML sele 最近發現DOMDocument對象很重要,還有XMLHTTP也很重要 註意大小寫一定不能弄錯. 屬性: 1Attributes 存儲節點的屬性列表(只讀) 2childNodes 存儲節點的子

JavaScript day06 DOM程式設計4BOM屬性方法

一、HTML DOM 1.Document物件 1.1屬性 title 描述:獲取/設定標題欄資訊 語法: document.title = value 或 var 變數名稱 = document.title <!DOCTYPE html> <h

HTML DOM 物件的屬性方法

getElementById(id) ———— 獲取帶有指定id的節點元素。 getElementByTagName(tagename)———– 獲取相應標籤元素的子元素集合,它允許吧萬用字元作為它的引數,“”*“”一般是放在引號中以區分乘號。返回值是偽陣列。 getElementByClassName(c

函數屬性方法:lengthprototype

scrip spa ont pan div blog 屬性 col 方法 ECMAScript中的函數是對象,因此函數也有屬性和方法。每個函數都包含兩個屬性:ength和prototype。 其中, length屬性表示函數希望接收的命名參數的個數 . function

jQuery事件對象的屬性方法

行為 class down 接受 觸發 觸發事件 this 右鍵 lan jQuery事件對象的屬性和方法 事件對象的屬於與方法有很多,但是我們經常用的只有那麽幾個,這裏我主要說下作用與區別 event.type:獲取事件的類型 觸發元素的事件類型 $("a").cli

JavaScript的String對象的屬性方法

charat() match ace 屬性 -- ast 一個 unicode rep ---恢復內容開始--- 屬性: length 字符串的長度 prototype 字符串的原型對象 constructor 字符串

scrapy.Spider的屬性方法

ted 爬蟲 rules 類方法 使用 cto component 記錄日誌 settings scrapy.Spider的屬性和方法 屬性: name:spider的名稱,要求唯一 allowed_domains:允許的域名,限制爬蟲的範圍 start_urls:初始u

JavaScript 字符串屬性方法

length last 字符串 slice 第一次 prototype bstr 找到 earch 字符串屬性:    constructor : 返回創建字符串屬性的函數;   length : 返回字符串的長度;   prototype : 允許您向對象添加屬性和方法;

利用反射操作bean的屬性方法

兩個 決定 dto epo cts 強制 多選 通過 報表 今天在開發中碰到這樣一個場景:當請求添加項目下的目錄時,傳過來的是一個IndexModel,這個Model裏有關於這個目錄字段的詳細信息,包括基礎報表,實時,漏鬥等信息(這些字段類型都是boolean),對應於頁面

form表單的應用:form對象自帶屬性方法及提交時提交的數據.....

uil nsf fileread tex class dataurl asd who accept 1.html中含有form表單 (1)html <form id="picLoad" class="lt" style="width: 230px;" enctype=

JS遍歷屬性方法

asc == itl 方法 archive items += ron arch 引用原文:http://www.cnblogs.com/lishenglyx/archive/2008/12/08/1350573.html#undefined <script l

Android零基礎入門第22節:ImageView的屬性方法大全

子類 parent ide eight odin 使用詳解 統架構 討論 架構 通過前面幾期的學習,TextView控件及其子控件基本學習完成,可以在Android屏幕上顯示一些文字或者按鈕,那麽從本期開始來學習如何在進行圖片展示,這就是涉及到另外一個非常重要的控件家族,那

[轉]Ext.grid常用屬性方法

生效 沒有 not find nco ctr type sco asc 原文地址:http://blog.csdn.net/fm19901229/article/details/8113969 1、Ext.grid.GridPanel 主要配置項: store:表格的數

設置dom節點屬性的代碼優化

stop 相對 方案 關註 cnblogs 很多 top switch 優化 需求:某dom節點在正常情況下,有設置其transition-duration為1s,在mousemove時候,要去掉其transition-duration設置的時間,在mouseup時候,恢復

Vue屬性方法

vue屬性和方法<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>屬性和方法</title> </head&g

淺析JavaScript訪問對象屬性方法及區別

cti on() 對象方法 編寫程序 因此 brush new 函數 name 屬性是一個變量,用來表示一個對象的特征,如顏色、大小、重量等;方法是一個函數,用來表示對象的操作,如奔跑、呼吸、跳躍等。 在JavaScript中通常使用”."運算符來存取對象的屬性的值。或者使