Spiegazione dettagliata delle proprietà e dei metodi degli elementi DOM in JavaScript (esempio di codice)

In HTML DOM (Document Object Model), ogni parte è un nodo.

Il nodo è l'unità di composizione più fondamentale della struttura DOM, ogni tag HTML è un nodo della struttura DOM.

Il documento è un nodo di documento.

Tutti gli elementi HTML sono nodi di elemento.

Tutte le proprietà HTML sono nodi di attributo.

Il testo inserito nel elemento HTML è il nodo di testo.

I commenti sono commenti del nodo.

Il tipo di nodo più básico è il tipo Node, tutti gli altri tipi derivano da Node, le operazioni DOM sono spesso la parte più onerosa del JavaScript, di conseguenza i problemi causati da NodeList sono i più frequenti. Attenzione: NodeList è 'dinamico', il che significa che ogni volta che si accede all'oggetto NodeList, viene eseguita una query, anche se questo aumenta le spese, garantisce che i nodi aggiunti di recente siano accessibili nella NodeList.

Tutti i nodi elemento condividono proprietà e metodi comuni, vediamoli più da vicino:

Prima di tutto, vediamo le proprietà comuni più utilizzate

1 element.id imposta o restituisce l'id dell'elemento

2 element.innerHTML imposta o restituisce il contenuto dell'elemento, può includere i tag figli e il contenuto

3 element.innerText imposta o restituisce il contenuto dell'elemento, escludendo i tag figli e il contenuto

4 element.className imposta o restituisce il nome della classe dell'elemento

5 element.nodeName restituisce il nome del tag in maiuscolo del nodo

6 element.nodeType restituisce il tipo di nodo del nodo, 1 rappresenta il nodo elemento, 2 rappresenta il nodo attributo...

7 element.nodeValue restituisce il valore del nodo, per i nodi elemento il valore è null

8 element.childNodes restituisce l'oggetto nodelist dei figli del nodo, nodelist è simile a un array, ha l'attributo length e può essere utilizzato per accedere al valore dell'indice specifico [index] (può anche utilizzare il metodo item(index)). Ma nodelist non è un array.

9 element.firstChild/element.lastChild restituisce il primo/ultimo figlio del nodo (inclusi i commenti e i nodi di testo)

10 element.parentNode restituisce il nodo genitore di questo nodo

11 element.previousSibling restituisce il nodo precedente dello stesso livello (inclusi i commenti e i nodi di testo)

12 element.nextSibling restituisce il nodo successivo dello stesso livello (inclusi i commenti e i nodi di testo)

13 element.childElementCount : restituisce il numero di figli elementi (esclusi i nodi di testo e i commenti)

14 element.firstElementChild /element.lastElementChild restituisce il primo/ultimo figlio elemento (esclusi i nodi di testo e i commenti)

15 element.previousElementSibling/nextElementSibling restituisce l'elemento fratello precedente/seguinte (esclusi i nodi di testo e i commenti)

16　 element.clientHeight/clientWidth　返回内容的可视高度/宽度（不包括边框，边距或滚动条）

17　 element.offsetHeight/offsetWidth /offsetLeft/offset/Top 返回元素的高度/宽度/相对于父元素的左偏移/右偏移(包括边框和填充,不包括边距)

18　 element.style　设置或返回元素的样式属性,。示例：element.style.backgroundColor　注意，与CSS不同，style的属性要去掉横杠，第二个单词　　首字母要大写

19　 element.tagName　 Restituisce il nome del tag dell'elemento (in maiuscolo)

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Titolo</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">
    请选择功法：<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><!--注释标签-->
  <p>推荐功法-->葵花宝典</p>
  <script>
    //JavaScript演示代码请添加至此
    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>

浏览器显示结果：

还有某些专属属性

专属属性指那些专属于某种标签的属性。比如 <a> 标签，有href和target属性。<img> 有src属性; <form>有entype以及action属性……

a_element.href　返回当前节点指向的超链接

再来看看较为常用的通用方法：

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Titolo</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">
    请选择功法：<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>
    //JavaScript演示代码请添加至此
  </script>
</body>
</html>

(以下所有JavaScript演示代码都是以本文档中的示例HTML代码为实验对象)

1　 element.appendChild(nodeName)　　向元素添加新的子节点，作为最后一个子节点，并返回该子节点。若要向HTML DOM添加新元素，您首先必须创建该元素，然后将其追加到现有元素上。