Основы JavaScript: детальный разбор свойств и методов элементов в DOM

在 HTML DOM （文档对象模型）中，每个部分都是节点。

节点是DOM结构中最基本的组成单元，每一个HTML标签都是DOM结构的节点。

文档是一个　　　文档节点。

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

所有 HTML 属性都是　　　属性节点

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

注释是　　　注释节点。

最基本的节点类型是Node类型，其他所有类型都继承自Node，DOM操作往往是js中开销最大的部分，因而NodeList导致的问题最多。要注意：NodeList是‘动态的'，也就是说，每次访问NodeList对象，都会运行一次查询，虽然这样增加了开销，但可以保证我们新添加的节点都能在NodeList中访问的 до。

Все элементные узлы имеют общие свойства и методы, давайте рассмотрим их подробно:

Сначала давайте рассмотрим наиболее часто используемые общие свойства

1　element.id　устанавливает или возвращает id элемента

2　element.innerHTML　устанавливает или возвращает содержимое элемента, может включать подтеги и содержимое

3　element.innerText　устанавливает или возвращает содержимое элемента, не включая подтеги и содержимое

4　element.className　устанавливает или возвращает имя класса элемента

5　element.nodeName　возвращает заглавные буквы тега узла

6　element.nodeType　возвращает тип узла, 1 означает узел элемента, 2 означает узел атрибута…

7　element.nodeValue　возвращает значение узла, для элементных узлов это значение null

8　element.childNodes　возвращает объект nodeslist подузлов элемента, nodelist подобен массиву, имеет атрибут length, можно использовать скобки [index] для доступа к значению по индексу (можно также использовать метод item(index)). Но nodelist не является массивом.

9　element.firstChild/element.lastChild　возвращает первый/последний подузел элемента (включая комментарии и узлы текста)

10　element.parentNode　возвращает родительский узел текущего узла

11　element.previousSibling　возвращает предшествующий узел того же уровня (включая комментарии и узлы текста)

12　element.nextSibling　возвращает следующий узел того же уровня (включая комментарии и узлы текста)

13　element.childElementCount :　возвращает количество подэлементов (не включая узлы текста и комментарии)

14　element.firstElementChild /element.lastElementChild　возвращает первый/последний подэлемент (не включая узлы текста и комментарии)

15　element.previousElementSibling/nextElementSibling　возвращает предшествующий/следующий братский элемент (не включая узлы текста и комментарии)

16　element.clientHeight/clientWidth　Возвращает可视的高度/ширину содержимого (не включая рамку, отступы или полосы прокрутки)

17　element.offsetHeight/offsetWidth /offsetLeft/offset/Top　Возвращает высоту/ширину/правый отступ элемента (включая рамку и заполнение, но не включая отступы)

18　element.style　Устанавливает или возвращает стили элемента. Пример: element.style.backgroundColor　 Обратите внимание, что в отличии от CSS, свойства стиля нужно удалить дефисы, и второе слово должно начинаться с большой буквы

19　element.tagName　Возвращает имя тега элемента (заглавными буквами)

<!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">
    Выберите метод:<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>
    //Добавьте код js демонстрации здесь
    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="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">
    Выберите метод:<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>

(Все следующие примеры кода js都是以 примером html кода из данного документа как объектом эксперимента)

1　 element.appendChild(nodeName)　　 Добавить новый подузел к элементу, в качестве последнего подузла, и вернуть этот подузел. Если нужно добавить новый элемент в HTML DOM, вы сначала должны создать этот элемент, затем добавить его к существующему элементу.

js демонстрационный код:

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

2　 element.getAttribute(para)　　 Возвращает значение указанного свойства узла.

js демонстрационный код:

var a = document.getElementById('first_form');
console.log(a.getAttribute('name'))      //вывод в консоль значения name

3　 element.getAttributeNode(para)　　 Возвращает указанный узел свойства.

js демонстрационный код:

var a = document.getElementById('first_form');
console.log(a.getAttributeNode('name'))      //вывод в консоль name свойство узла

4　 element.getElementsByTagName(para) Возвращает набор всех подэлементов с указанным тегом.

js демонстрационный код:

var a = document.getElementById('first_form');
console.log(a.getElementsByTagName('input'))      //вывод в консоль

5　 element.hasAttribute(para)　 Если элемент имеет указанное свойство, возвращает true, в противном случае возвращает false.

js демонстрационный код:

var a = document.getElementById('first_form');
console.log(a.hasAttribute('name'))      //вывод в консоль

6　 element.insertBefore(insertNode,appointedNode)　 Внутри уже существующего подузла вставить новый узел.

js демонстрационный код:

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(); Из элемента удалить указанное свойство.

Пример кода JavaScript:

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

8　 element.removeChild()　　 Удалить подузел из элемента. Удаленный узел, несмотря на то, что он больше не находится в дереве документа, все еще находится в памяти и может быть вызван в любое время.

Пример кода JavaScript:

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

9　 element.replaceChild(newNode,replaceNode)　 Заменить заданный узел новым узлом.

10　 element.setAttribute(attrName,attrValue)　 Установить или изменить заданный атрибут на заданное значение.

Пример кода JavaScript:

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

11　 element.setAttributeNode()　　　 Изменить узел атрибута.

Пример кода JavaScript:

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() Вернуть узел NodeList, расположенный по заданному индексу.

Пример кода JavaScript:

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

Вот и все, что я хотел рассказать вам о свойствах и методах элементов DOM в базовом учебнике JavaScript. Надеюсь, вам понравилось и вы поддержите учебник 'Крик教程'~

Основной учебник

Вам может понравиться