欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js基礎(chǔ)之DOM中元素對象的屬性方法詳解

 更新時(shí)間：2016年10月28日 09:42:00   投稿：jingxian  
下面小編就為大家?guī)硪黄猨s基礎(chǔ)之DOM中元素對象的屬性方法詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

在 HTML DOM （文檔對象模型）中，每個(gè)部分都是節(jié)點(diǎn)。

節(jié)點(diǎn)是DOM結(jié)構(gòu)中最基本的組成單元，每一個(gè)HTML標(biāo)簽都是DOM結(jié)構(gòu)的節(jié)點(diǎn)。

文檔是一個(gè)    文檔節(jié)點(diǎn) 。

所有的HTML元素都是    元素節(jié)點(diǎn)

所有 HTML 屬性都是    屬性節(jié)點(diǎn)

文本插入到 HTML 元素是    文本節(jié)點(diǎn)

注釋是    注釋節(jié)點(diǎn)。

最基本的節(jié)點(diǎn)類型是Node類型，其他所有類型都繼承自Node，DOM操作往往是js中開銷最大的部分，因而NodeList導(dǎo)致的問題最多。要注意：NodeList是‘動(dòng)態(tài)的'，也就是說，每次訪問NodeList對象，都會(huì)運(yùn)行一次查詢，雖然這樣增加了開銷，但可以保證我們新添加的節(jié)點(diǎn)都能在NodeList中訪問的到。

所有的元素節(jié)點(diǎn)都有共用的屬性和方法，讓我們來詳細(xì)看一看：

先來看較為常用的 通用 屬性

1  element.id       設(shè)置或返回元素的 id。

2  element.innerHTML   設(shè)置或者返回元素的內(nèi)容，可包含節(jié)點(diǎn)中的子標(biāo)簽以及內(nèi)容

3  element.innerText  設(shè)置或者返回元素的內(nèi)容，不包含節(jié)點(diǎn)中的子標(biāo)簽以及內(nèi)容

4  element.className   設(shè)置或者 返回元素的類名

5  element.nodeName    返回該節(jié)點(diǎn)的大寫字母標(biāo)簽名

6  element.nodeType   返回該結(jié)點(diǎn)的節(jié)點(diǎn)類型，1表示元素節(jié)點(diǎn)  2表示屬性節(jié)點(diǎn)……

7  element.nodeValue  返回該節(jié)點(diǎn)的value值，元素節(jié)點(diǎn)的該值為null

8  element.childNodes  返回元素的子節(jié)點(diǎn)的nodeslist對象，nodelist類似于數(shù)組，有l(wèi)ength屬性，可以使用方括號(hào) [index] 訪問指定索引的值(也可　　以使用item(index)方法)。但nodelist并不是數(shù)組。

9  element.firstChild/element.lastChild  返回元素的第一個(gè)/最后一個(gè)子節(jié)點(diǎn)(包含注釋節(jié)點(diǎn)和文本節(jié)點(diǎn))

10  element.parentNode  返回該結(jié)點(diǎn)的父節(jié)點(diǎn)

11  element.previousSibling  返回與當(dāng)前節(jié)點(diǎn)同級(jí)的上一個(gè)節(jié)點(diǎn)(包含注釋節(jié)點(diǎn)和文本節(jié)點(diǎn))

12  element.nextSibling   返回與當(dāng)前節(jié)點(diǎn)同級(jí)的下一個(gè)節(jié)點(diǎn)(包含注釋節(jié)點(diǎn)和文本節(jié)點(diǎn))

13  element.chileElementCount :  返回子元素(不包括文本節(jié)點(diǎn)以及注釋節(jié)點(diǎn))的個(gè)數(shù)

14  element.firstElementChild /lastElementChild 返回第一個(gè)/最后一個(gè)子元素(不包括文本節(jié)點(diǎn)以及注釋節(jié)點(diǎn))

15  element.previousElementSibling/nextElementSibling  返回前一個(gè)/后一個(gè)兄弟元素(不包括文本節(jié)點(diǎn)以及注釋節(jié)點(diǎn))

16  element.clientHeight/clientWidth  返回內(nèi)容的可視高度/寬度（不包括邊框，邊距或滾動(dòng)條）

17  element.offsetHeight/offsetWidth /offsetLeft/offset/Top 返回元素的高度/寬度/相對于父元素的左偏移/右偏移(包括邊框和填充,不包括邊距)

18  element.style  設(shè)置或返回元素的樣式屬性,。示例：element.style.backgroundColor  注意，與CSS不同，style的屬性要去掉橫杠，第二個(gè)單詞　　首字母要大寫

19  element.tagName  返回元素的標(biāo)簽名(大寫)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .form_style{
      color: #5b5b5b;
      font-size: large;
      border: 5px solid rebeccapurple;
      background-color: antiquewhite;
      width: 440px;
      height: 120px;
      position: relative;
      left: 20px;
      top:20px;
      margin:10px;
    }
    p {
      color: #5b5b5b;
      font-size: larger;
      text-indent: 40px;
    }
  </style>

</head>


<body>
  <form id='first_form' class="form_style" name="cangjingge" >
    請選擇功法：<br/>
    <input type="radio" name="gongfa" value="jysg">九陽神功<br/>
    <input type="radio" name="gongfa" value="qkdny">乾坤大挪移<br/>
    <input type="radio" name="gongfa" value="khbd">葵花寶典<br/>
    <input type="radio" name="gongfa" value="xxdf">吸星大法<br/>
  </form>
  <p>少俠請三思！?。?lt;/p><!--注釋標(biāo)簽-->
  <p>推薦功法--&gt;葵花寶典</p>

  <script>
    //js演示代碼請?zhí)砑又链?
    var a=document.getElementById('first_form'),
      b = document.getElementsByTagName('p')[0];

    console.log(a.id);
    console.log(a.innerHTML);
    console.log(a.className);
    console.log(a.childNodes);
    console.log(a.firstChild);
    console.log(a.lastChild);
    console.log(a.nodeName);
    console.log(a.nodeType);
    console.log(a.nodeValue);
    console.log(a.parentNode);
    console.log(a.clientHeight);
    console.log(a.offsetHeight);
    console.log(b.nextSibling);
    console.log(b.nextElementSibling);

  </script>

</body>


</html>

瀏覽器顯示結(jié)果：

還有某些專屬屬性

專屬屬性指那些專屬于某種標(biāo)簽的屬性。比如 <a> 標(biāo)簽，有href和target屬性。<img> 有src屬性; <form>有entype以及action屬性……

a_element.href  返回當(dāng)前節(jié)點(diǎn)指向的超鏈接

再來看看較為常用的通用方法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .form_style{
      color: #5b5b5b;
      font-size: large;
    }
    p {
      color: #5b5b5b;
      font-size: larger;
    }
  </style>

</head>


<body>
  <form id='first_form' class="form_style" name="cangjingge" >
    請選擇功法：<br/>
    <input type="radio" name="gongfa" value="jysg">九陽神功<br/>
    <input type="radio" name="gongfa" value="qkdny">乾坤大挪移<br/>
    <input type="radio" name="gongfa" value="khbd">葵花寶典<br/>
    <input type="radio" name="gongfa" value="xxdf">吸星大法<br/>
  </form>
  <p>少俠請三思?。?！</p>

  <script>
    //js演示代碼請?zhí)砑又链?
    
  </script>

</body>


</html>

(以下所有js演示代碼都是以本文檔中的 示例html代碼 為實(shí)驗(yàn)對象)

1  element.appendChild(nodeName)   向元素添加新的子節(jié)點(diǎn)，作為最后一個(gè)子節(jié)點(diǎn)，并返回該子節(jié)點(diǎn)。如需向 HTML DOM 添加新元素，您首先必須創(chuàng)建該元素，然后把它追加到已有的元素上。

js演示代碼：

var a=document.getElementById('first_form');   
var textnode=document.createTextNode("慎重選擇");  
a.appendChild(textnode)

2  element.getAttribute(para)   返回元素節(jié)點(diǎn)的指定屬性值。

js演示代碼：

var a=document.getElementById('first_form');
console.log(a.getAttribute('name'))      //控制臺(tái)輸出name的值

3  element.getAttributeNode(para)   返回指定的屬性節(jié)點(diǎn)。

js演示代碼：

var a=document.getElementById('first_form');
console.log(a.getAttributeNode('name'))      //控制臺(tái)輸出name屬性節(jié)點(diǎn)

4  element.getElementsByTagName(para) 返回?fù)碛兄付?biāo)簽名的所有子元素的集合。

js演示代碼：

var a=document.getElementById('first_form');
console.log(a.getElementsByTagName('input'))      //控制臺(tái)輸出

5  element.hasAttribute(para)  如果元素?fù)碛兄付▽傩?，則返回true，否則返回 false。

js演示代碼：

var a=document.getElementById('first_form');
console.log(a.hasAttribute('name'))      //控制臺(tái)輸出

6  element.insertBefore(insertNode,appointedNode)  在指定的已有的子節(jié)點(diǎn)之前插入新節(jié)點(diǎn)。

js演示代碼：

var a=document.getElementById('first_form');
    var inputList=document.getElementsByTagName('input');
    var newNode=document.createElement('input');
    var newNode2=document.createTextNode('天馬流星拳');
    var br=document.createElement('br');
    newNode.type='radio';
    newNode.name='gongfa';
    newNode.value='tmlxq';
    a.insertBefore(newNode,inputList[2]);
    a.insertBefore(newNode2,inputList[3]);
    a.insertBefore(br,inputList[3]);

7  element.removeAttribute() 從元素中移除指定屬性。

js示例代碼：

var a=document.getElementById('first_form');
a.removeAttribute('name');
console.log(a.hasAttribute('name'))

8  element.removeChild()   從元素中移除子節(jié)點(diǎn)。移除的節(jié)點(diǎn)雖然不在文檔樹中了，但其實(shí)還在內(nèi)存中，可以隨時(shí)被引用。

js示例代碼：

var a=document.getElementById('first_form');
    a.removeChild(a.childNodes[3]);

9  element.replaceChild(newNode,replaceNode)  把指定節(jié)點(diǎn)替換為新節(jié)點(diǎn)。

10  element.setAttribute(attrName,attrValue)  把指定屬性設(shè)置或更改為指定值。

js示例代碼：

var a=document.getElementById('first_form');
    a.setAttribute('name','shaolinsi');
    console.log(a.name)

11  element.setAttributeNode()    修改指定屬性節(jié)點(diǎn)

js示例代碼：

var a=document.getElementById('first_form');
    var attr = document.createAttribute('id');
    attr.value='the_first';
    a.setAttributeNode(attr);
　　　　 console.log(a.id)

12  nodelist.item() 返回 NodeList 中位于指定下標(biāo)的節(jié)點(diǎn)。

js示例代碼：

var a=document.getElementsByTagName('input')
console.log(a.item(2))

以上就是小編為大家?guī)淼膉s基礎(chǔ)之DOM中元素對象的屬性方法詳解全部內(nèi)容了，希望大家多多支持腳本之家~

相關(guān)文章

最新評(píng)論