javascript dom物件專屬屬性實例匯總-js教程-PHP中文網

javascript dom物件專屬屬性實例匯總

伊谢尔伦

發布： 2017-07-21 13:10:21

原創

1496 人瀏覽過

專屬屬性指那些專屬於某種標籤的屬性。例如標籤，有href和target屬性。有src屬性;

有entype以及action屬性…

a_element.href 傳回目前節點所指向的超連結

再來看看較常用的一般方法：

<!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=&#39;first_form&#39; 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演示代码请添加至此
    
  </script>

</body>


</html>

登入後複製

1 element.appendChild(nodeName) 新增新的元素節點，作為最後一個子節點，並傳回該子節點。如需在 HTML DOM 中新增元素，您首先必須建立該元素，然後將它追加到現有的元素上。

js示範程式碼：

var a=document.getElementById(&#39;first_form&#39;);   
var textnode=document.createTextNode("慎重选择");  
a.appendChild(textnode)

登入後複製

2 element.getAttribute(para) 傳回元素節點的指定屬性值。

js示範程式碼：

var a=document.getElementById(&#39;first_form&#39;);
console.log(a.getAttribute(&#39;name&#39;))      //控制台输出name的值

登入後複製

3 element.getAttributeNode(para)## 傳回指定的屬性節點。

js示範程式碼：

var a=document.getElementById(&#39;first_form&#39;);
console.log(a.getAttributeNode(&#39;name&#39;))      //控制台输出name属性节点

登入後複製

element.getElementsByTagName(para) 傳回擁有指定標籤名的所有子元素的集合。

js示範程式碼：

var a=document.getElementById(&#39;first_form&#39;);
console.log(a.getElementsByTagName(&#39;input&#39;))      //控制台输出

登入後複製

element.hasAttribute(para) 如果元素擁有指定屬性，則傳回true，否則傳回false。

js示範程式碼：

var a=document.getElementById(&#39;first_form&#39;);
console.log(a.hasAttribute(&#39;name&#39;))      //控制台输出

登入後複製

element.insertBefore(insertNode,appointedNode) 在指定的已有的子節點之前插入新節點。

js示範程式碼：

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

登入後複製

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

js範例程式碼：

var a=document.getElementById(&#39;first_form&#39;);
a.removeAttribute(&#39;name&#39;);
console.log(a.hasAttribute(&#39;name&#39;))

登入後複製

element.removeChild() #從元素移除子節點。移除的節點雖然不在文件樹中了，但其實還在記憶體中，可以隨時被引用。

js範例程式碼：

var a=document.getElementById(&#39;first_form&#39;);
    a.removeChild(a.childNodes[3]);

登入後複製

element.replaceChild(newNode,replaceNode) #把指定節點替換為新節點。

element.setAttribute(attrName,attrValue) 將指定屬性設定或改為指定值。

js範例程式碼：

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

登入後複製

element.setAttributeNode() 修改指定屬性節點

js範例程式碼：

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

登入後複製

nodelist.item() 傳回NodeList 中位於指定下標的節點。

js範例程式碼：

var a=document.getElementsByTagName(&#39;input&#39;)
console.log(a.item(2))

登入後複製

以上是javascript dom物件專屬屬性實例匯總的詳細內容。更多資訊請關注PHP中文網其他相關文章！