Home > Article > Web Front-end > Summary of exclusive attribute instances of javascript dom objects

Summary of exclusive attribute instances of javascript dom objects

伊谢尔伦Original: 2017-07-21 13:10:211419browse

Exclusive attributes refer to those attributes that are exclusive to a certain tag. For example, the 3499910bf9dac5ae3c52d5ede7383485 tag has href and target attributes. a1f02c36ba31691bcfe87b2722de723b has the src attribute; ff9c23ada1bcecdd1a0fb5d5a0f18437 has the entype and action attributes...

a_element.href Returns the hyperlink pointed to by the current node

Let’s take a look The more commonly used general method:

<!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) Add a new child to the element node as the last child node and returns that child node. To add a new element to the HTML DOM, you must first create the element and then append it to an existing element.

js demo code:

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

element.getAttribute(para) Returns the designation of the element node attribute value.

js demo code:

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

element.getAttributeNode(para) Returns the specified attribute node . js demo code:

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

element.getElementsByTagName(para)

Returns the specified tag name The collection of all child elements. js demo code:

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

element.hasAttribute(para)

If the element has the specified attribute , returns true, otherwise returns false. js demo code:

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

element.insertBefore(insertNode,appointedNode)

In the specified Insert new nodes before existing child nodes. js demo code:

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()

Remove the specified element from the element Attributes. js sample code:

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

element.removeChild()

Remove the child from the element node. Although the removed node is no longer in the document tree, it is still in memory and can be referenced at any time. js sample code:

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

element.replaceChild(newNode,replaceNode)

Replace the specified node Replace with new node. 10 element.setAttribute(attrName,attrValue)

Set or change the specified attribute to the specified value. js sample code:

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

element.setAttributeNode()

Modify the specified attribute node

js sample code:

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()

Returns the node located at the specified subscript in the NodeList .

js sample code:

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

The above is the detailed content of Summary of exclusive attribute instances of javascript dom objects. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed code explanation of how javascript traverses the attribute values of an objectNext article：Detailed code explanation of how javascript traverses the attribute values of an object

See more

Summary of exclusive attribute instances of javascript dom objects

Related articles