자바스크립트 DOM 객체의 배타적 속성 인스턴스 요약-JS 튜토리얼-php.cn

자바스크립트 DOM 객체의 배타적 속성 인스턴스 요약

伊谢尔伦

풀어 주다： 2017-07-21 13:10:21

원래의

1472명이 탐색했습니다.

독점 속성은 특정 태그에 고유한 속성을 의미합니다. 예를 들어 태그에는 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>

로그인 후 복사

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

지정된 속성 nodejs 샘플 코드 수정:

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.ite m()

반환 NodeList 지정된 인덱스에 있는 노드입니다. js 샘플 코드:

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

로그인 후 복사

위 내용은 자바스크립트 DOM 객체의 배타적 속성 인스턴스 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!