Grundlegende DOM-Objekteigenschaften und Methoden in JavaScript (Detaillierte Erklärung)

In HTML DOM (Dokumentobjektmodell) ist jeder Teil ein Knoten.

Knoten sind die grundlegenden Bestandteile der DOM-Struktur (Dokumentobjektmodell), und jeder HTML-Tag ist ein Knoten der DOM-Struktur.

文档是一个　　　文档节点。

所有的HTML元素都是　　　元素节点

所有 HTML 属性都是　　　属性节点

文本插入到 HTML 元素是　　　文本节点

注释是　　　注释节点。

The most basic node type is the Node type, all other types inherit from Node, DOM operations are often the most expensive part of JavaScript, so NodeList problems are the most common. Note: NodeList is 'dynamic', which means that each time the NodeList object is accessed, a query is run, although this increases the overhead, it ensures that all newly added nodes can be accessed in the NodeList.

All element nodes have common properties and methods, let's take a detailed look at them:

先来看较为常用的通用属性

1　 element.id　　　　　　 Sets or returns the id of the element.

2　 element.innerHTML　　 Sets or returns the content of the element, which can include sub-elements and content within the node

3　 element.innerText　 Sets or returns the content of the element, does not include sub-elements and content within the node

4　 element.className　　 Sets or returns the class name of the element

5　 element.nodeName　　　 Returns the uppercase tag name of the node

6　 element.nodeType　　 Returns the node type of the current node,1表示元素节点　 2表示属性节点……

7　 element.nodeValue　 Returns the value of the node, which is null for element nodes

8　 element.childNodes　 Returns the nodeslist object of the child nodes of the element, nodelist is similar to an array, has a length property, and can use brackets [index] to access the value at a specific index (you can also use the item(index) method). However, nodelist is not an array.

9　 element.firstChild/element.lastChild　 Returns the first child of the element/最后一个子节点(包含注释节点和文本节点)

10　 element.parentNode　 Returns the parent node of the current node

11　 element.previousSibling　 Returns the previous sibling node at the same level (including comment nodes and text nodes)

12　 element.nextSibling　　 Returns the next sibling node at the same level (including comment nodes and text nodes)

13　 element.chileElementCount :　 Returns the number of child elements (excluding text nodes and comment nodes)

14　 element.firstElementChild /lastElementChild Returns the first one/Last child element (excluding text nodes and comment nodes)

15　 element.previousElementSibling/nextElementSibling　 Returns the previous one/Next sibling element (excluding text nodes and comment nodes)

16　 element.clientHeight/clientWidth　 Returns the visible height of the content/Width (excluding border, margin, or scrollbar)

17　 element.offsetHeight/offsetWidth /offsetLeft/offset/Top Returns the height of the element/Width/Left offset relative to the parent element/Right offset (including border and padding, excluding margin)

18　 element.style　 Sets or returns the style properties of the element, example: element.style.backgroundColor　 Note, unlike CSS, the properties of style should remove the hyphen, the second word　 Should start with a capital letter

19　 element.tagName　 Returns the tag name of the element (in uppercase)

!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">
    Wählen Sie die Methode aus:<br/>
    <input type="radio" name="gongfa" value="jysg">Neun Yang Shengong<br/>
    <input type="radio" name="gongfa" value="qkdny">Qiankun Gross Verschieben<br/>
    <input type="radio" name="gongfa" value="khbd">Kemuhäubchen<br/>
    <input type="radio" name="gongfa" value="xxdf">Sternsaugungsmethode<br/>
  </form>
  <p>Bitte denken Sie dreimal nach!!!</p><!--注释标签-->
  <p>推荐功法-->葵花宝典</p>
  <script>
    //Fügen Sie die js-Demonstrationen hier hinzu
    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>

Browseranzeigeergebnis:

Es gibt auch einige spezifische Attribute

Spezifische Attribute sind solche, die nur für eine bestimmte Art von Tag gehören. Zum Beispiel hat der <a>-Tag die Attribute href und target. <img> hat das Attribut src; <form> hat die Attribute entype und action……

a_element.href　Gibt den Link, auf den der aktuelle Knoten zeigt, zurück

Sehen wir uns an, welche allgemeinen Methoden häufig verwendet werden:

!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">
    Wählen Sie die Methode aus:<br/>
    <input type="radio" name="gongfa" value="jysg">Neun Yang Shengong<br/>
    <input type="radio" name="gongfa" value="qkdny">Qiankun Gross Verschieben<br/>
    <input type="radio" name="gongfa" value="khbd">Kemuhäubchen<br/>
    <input type="radio" name="gongfa" value="xxdf">Sternsaugungsmethode<br/>
  </form>
  <p>Bitte denken Sie dreimal nach!!!</p>
  <script>
    //Fügen Sie die js-Demonstrationen hier hinzu
  </script>
</body>
</html>

(Alle folgenden js-Demonstrationen sind auf dem Beispielhtml-Code dieses Dokuments basierend)

1　 element.appendChild(nodeName)　　 Fügen Sie einem Element neue Unter nodes hinzu, als letztes Unter node, und geben Sie das Unter node zurück. Um ein neues Element in den HTML DOM hinzuzufügen, müssen Sie zunächst dieses Element erstellen und es auf das bestehende Element anhängen.

js-Demonstrationscode:

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

2　 element.getAttribute(para)　　 Gibt den angegebenen Attributswert des Elementknotens zurück.

js-Demonstrationscode:

var a=document.getElementById('first_form');
console.log(a.getAttribute('name'))      //Konsolenausgabe des Wertes von name

3　 element.getAttributeNode(para)　　 Gibt den angegebenen Eigenschaftsknoten zurück.

js-Demonstrationscode:

var a=document.getElementById('first_form');
console.log(a.getAttributeNode('name'))      //Konsolenausgabe name-Eigenschaftsknoten

4　 element.getElementsByTagName(para) Gibt eine Sammlung aller Unter元素 mit dem angegebenen Tagnamen zurück.

js-Demonstrationscode:

var a=document.getElementById('first_form');
console.log(a.getElementsByTagName('input'))      //Konsolenausgabe

5　 element.hasAttribute(para)　 Gibt true zurück, wenn das Element die angegebene Eigenschaft hat, sonst false.

js-Demonstrationscode:

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

6　 element.insertBefore(insertNode,appointedNode)　 Neuen Knoten vor einem bestehenden Unter节点 einfügen.

js-Demonstrationscode:

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(); Eigenschaft 'name' aus dem Element entfernen.

js-Beispielcode:

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

8　 element.removeChild()　　 Entferne den Unter节点 aus dem Element. Der entfernte Knoten ist zwar nicht mehr im Dokumentbaum, aber er ist immer noch im Speicher und kann jederzeit referenziert werden.

js-Beispielcode:

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

9　 element.replaceChild(newNode,replaceNode)　 Ersetze den angegebenen Knoten durch einen neuen Knoten.

10　 element.setAttribute(attrName,attrValue)　 Setze oder ändere den angegebenen Attribut auf die angegebene Wert.

js-Beispielcode:

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

11　 element.setAttributeNode()　　　 Ändere den angegebenen Attributknoten

js-Beispielcode:

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() Gibt den Knoten im NodeList an der angegebenen Indexposition zurück.

js-Beispielcode:

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

Das ist der umfassende Inhalt der von mir für euch bereitgestellten detaillierten Erklärung der Attribute und Methoden der DOM-Objekte im JS-Basis, ich hoffe, ihr unterstützt und rüft den Lernleitfaden lautstark unterstützt~

Grundlegende Anleitung

Empfohlene Artikel