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程式設計4和BOM屬性和方法
       
  
  
 一、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 

  
 

    

    
    函數屬性和方法:length和prototype
      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中通常使用”."運算符來存取對象的屬性的值。或者使