ホームページ > 記事 > ウェブフロントエンド > JavaScript dom オブジェクトの排他的属性インスタンスの概要

JavaScript dom オブジェクトの排他的属性インスタンスの概要

伊谢尔伦オリジナル: 2017-07-21 13:10:211486ブラウズ

排他的属性とは、特定のタグに固有の属性を指します。たとえば、3499910bf9dac5ae3c52d5ede7383485 タグには href 属性と target 属性があります。 a1f02c36ba31691bcfe87b2722de723b には src 属性があり、ff9c23ada1bcecdd1a0fb5d5a0f18437 には 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>

element.appendChild(nodeName)

新しい子ノードを要素に最後の子ノードとして追加し、その子ノードを返します。新しい要素を HTML DOM に追加するには、まず要素を作成し、それを既存の要素に追加する必要があります。 js デモコード:

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

element.getAttribute(para)

要素ノードの指定された属性値を返します。 js デモコード:

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

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)

指定されたノードを新しいノードに置き換えます。 10

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

return NodeList 指定されたインデックスにあるノード。 js サンプルコード:

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

以上がJavaScript dom オブジェクトの排他的属性インスタンスの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript がオブジェクトの属性値をトラバースする方法の詳細なコードの説明次の記事：JavaScript がオブジェクトの属性値をトラバースする方法の詳細なコードの説明

続きを見る