Часто используемые API для манипулирования DOM с помощью JavaScript

JavaScript API браузер HTML

1 Что такое ДОМ

Объектная модель документа (DOM) — это программный интерфейс для документов HTML и XML. Он обеспечивает структурированное представление документа и определяет способ сделать эту структуру доступной из программы для изменения структуры, стиля и содержимого документа.
Объектная модель документа (DOM) — это еще один отображаемый HTML-файл, с точки зрения непрофессионала, HTML-файл, мы можем использовать редактор, чтобы отобразить его в виде кода, вы можете использовать браузер, чтобы отобразить его в виде страницы, с файлы в другом представлении, будет другая форма выражения. И анализируется в узлах документа DOM и объектах (включая атрибуты объекта и методы) набора структур. Короче говоря, это будут веб-страницы и язык сценариев или программирования для подключения, мы можем использовать язык сценариев или программирования для изменения или управления веб-страницей с помощью DOM.

2 Как получить доступ к DOM

Мы можем вызвать его через JavaScriptdocumentа такжеwindowAPI элемента для управления документом или получения информации о документе.

3 Node

Node — это интерфейс, и есть много интерфейсов, которые наследуют методы и свойства от Node:Document, Element, CharacterData (which Text, Comment, and CDATASection inherit), ProcessingInstruction, DocumentFragment, DocumentType, Notation, Entity, EntityReference. узел имеетnodeTypeАтрибут представляет тип узла, который является целым числом, а разные значения представляют разные типы узлов. Подробная информация представлена ​​в следующей таблице:

константа типа узла

постоянный стоимость описывать
Node.ELEMENT_NODE 1 узел элемента, например.<p>а также<div>
Node.TEXT_NODE 3 ElementилиAttrфактический текст в
Node.PROCESSING_INSTRUCTION_NODE 7 один для документов XMLProcessingInstruction,Например<?xml-stylesheet ... ?>утверждение
Node.COMMENT_NODE 8 ОдинCommentузел
Node.DOCUMENT_NODE 9 ОдинDocumentузел
Node.DOCUMENT_TYPE_NODE 10 описание вида документаDocumentTypeузел. Например<!DOCTYPE html>для HTML5
Node.DOCUMENT_FRAGMENT_NODE 11 ОдинDocumentFragmentузел

Устаревшие константы типа узла

постоянный стоимость описывать
Node.ATTRIBUTE_NODE 2 Связующее свойство элемента. В спецификации DOM4NodeИнтерфейс больше не будет реализовывать это свойство элемента
Node.CDATA_SECTION_NODE 4 ОдинCDATASection. Удалено из спецификации DOM4.
Node.ENTITY_REFERENCE_NODE 5 Узел ссылки на сущность XML. Удалено из спецификации DOM4.
Node.ENTITY_NODE 6 XML<!ENTITY ...>узел. Удалено из спецификации DOM4.
Node.NOTATION_NODE 12 XML<!NOTATION ...>узел. Удалено из спецификации DOM4.

Предположим, мы хотим определить, является ли узел元素, это можно увидеть, взглянув на таблицу元素изnodeTypeЗначение атрибута равно 1, и код можно записать следующим образом:

if(X.nodeType === 1){
  console.log('X 是一个元素');
}

Среди типов узлов наиболее часто используются следующие:element,text,comment,document,document_fragmentэти типы.

3.1 Element

Элемент обеспечивает доступ к именам тегов элементов, дочерним узлам и атрибутам. Мы обычно используем элементы HTML, такие какdiv,span,aэтикетка.elementодин из. Элемент имеет следующие характеристики:
(1) тип узла равен 1
(2) nodeName — это имя тега элемента, а tagName также является именем возвращаемого тега.
(3) значение узла равно нулю
(4) parentNode может быть документом или элементом
(5) Дочерними узлами могут быть Element, Text, Comment, Processing_Instruction, CDATASection или EntityReference.

3.2 Text

Текст представляет собой текстовый узел, который содержит обычный текст и не может содержать HTML-код, но может содержать экранированный HTML-код. Текст обладает следующими свойствами:
(1) тип узла равен 3
(2) имя_узла равно #text
(3) nodeValue — текстовое содержимое
(4) parentNode является элементом
(5) Нет дочерних узлов

3.3 Comment

Комментарий представляет собой комментарий в документе HTML, который имеет следующие характеристики:
(1) тип узла равен 8
(2) имя_узла — #комментарий
(3) nodeValue — это содержимое комментария
(4) parentNode может быть документом или элементом
(5) Нет дочерних узлов

3.4 Document

Документ представляет документ в браузере,documentОбъект является экземпляром HTMLDocument, который представляет всю страницу, а также является свойством объекта окна. Документ имеет следующие свойства:
(1) тип узла равен 9
(2) имя_узла — это #document
(3) значение узла равно нулю
(4) parentNode имеет значение null
(5) Дочерний узел может быть DocumentType или Element

3.5 DocumentFragment

DocumentFragment — это единственный тип узла, который не имеет соответствующего тега и представляет собой облегченный документ, который можно использовать в качестве временного репозитория для узлов, которые могут быть добавлены в документ. DocumentFragment имеет следующие свойства:
(1) NodeType 11
(2) nodeName # фрагмент документа
(3) значение узла равно нулю
(4) parentNode имеет значение null

4 API создания узлов

Как следует из названия, этот API используется для создания узлов.

4.1 createElement

createElementСоздайте элемент, передав указанное имя тега. Если имя входящего тега неизвестно, будет создан пользовательский тег. Примечание. Браузеры ниже IE8 не поддерживают пользовательские теги.

грамматика

  let element = document.createElement(tagName);

использоватьcreateElementПримечание: поcreateElementСозданный элемент не принадлежит HTML-документу, он просто создан, а не добавлен в HTML-документ для вызоваappendChildилиinsertBeforeи т. д., чтобы добавить его в дерево документа HTML.

пример:

  let elem = document.createElement("div");
  elem.id = 'test';
  elem.style = 'color: red';
  elem.innerHTML = '我是新创建的节点';
  document.body.appendChild(elem);

Текущий результат:

4.2 createTextNode

createTextNodeиспользуется для создания текстового узла

грамматика

  var text = document.createTextNode(data);

createTextNodeполучает параметр, который является текстом в текстовом узле, иcreateElementТочно так же созданный текстовый узел является просто независимым узлом, который также требуетappendChildдобавить его в дерево документа HTML

пример:

  var node = document.createTextNode("我是文本节点");
  document.body.appendChild(node);

Текущий результат:

4.3 cloneNode

cloneNodeВозвращает копию узла, на котором был вызван метод

грамматика

  var dupNode = node.cloneNode(deep);

nodeузел для клонированияdupNodeКлонировать сгенерированный узел репликиdeep(Необязательно) Использовать ли глубокое клонирование, если true, все узлы-потомки этого узла также будут клонированы, если false, будет клонирован только сам узел.

Вот несколько замечаний:
(1) иcreateElementТакой же,cloneNodeСозданный узел является только узлом вне HTML-документа.appendChildметод для добавления в дерево документов
(2) Если скопированный элемент имеетid, его копия также будет содержатьid,из-заidОн уникален, поэтому после копирования узла его необходимо модифицироватьid
(3) Вызов полученногоdeepЛучше всего передать параметр, если этот параметр не передается, разные браузеры могут по-разному обрабатывать его значение по умолчанию.

Уведомление
Если реплицированный узел имеет привязку к событию, будет ли реплика также привязывать событие? Вот обсуждение конкретного случая:
(1) Если событие связано с addEventListener или onclick, узел копирования не будет связывать событие
(2) Если он связан встроенным, например:<div onclick="showParent()"></div>, в этом случае узел реплики также вызовет событие.

пример:

<body>
  <div id="parent">
    我是父元素的文本
    <br/>
    <span>
        我是子元素
    </span>
  </div>
  <button id="btnCopy">复制</button>
</body>
<script>
  var parent = document.getElementById("parent");
  document.getElementById("btnCopy").onclick = function(){
  	var parent2 = parent.cloneNode(true);
  	parent2.id = "parent2";
  	document.body.appendChild(parent2);
  }
</script>

Текущий результат:

4.4 createDocumentFragment

DocumentFragmentsявляется DOM-узлом. Они не являются частью основного дерева DOM. Обычно используется для создания фрагмента документа, добавления элементов к фрагменту документа, а затем добавления фрагмента документа к дереву DOM. В DOM-дереве фрагмент документа заменяется всеми его дочерними элементами.
Поскольку фрагмент документа существует в памяти, а не в дереве DOM, вставка дочерних элементов во фрагмент документа не вызывает переформатирование страницы (вычисление положения и геометрии элемента). Поэтому используйте фрагмент документаdocument fragmentsОбычно работает для оптимизации производительности.

грамматика

  let fragment = document.createDocumentFragment();

пример:

<body>
  <ul id="ul"></ul>
</body>
<script>
  (function()
  {
    var start = Date.now();
    var str = '', li;
    var ul = document.getElementById('ul');
    var fragment = document.createDocumentFragment();
    for(var i=0; i<1000; i++)
    {
        li = document.createElement('li');
        li.textContent = '第'+(i+1)+'个子节点';
        fragment.appendChild(li);
    }
    ul.appendChild(fragment);
  })();
</script>

Текущий результат:

4.5 Обзор API создания узлов

API создания узла в основном включаетcreateElement,createTextNode,cloneNodeа такжеcreateDocumentFragmentЧетыре метода, следует отметить следующие моменты:
(1) Создаваемый ими узел — это всего лишь изолированный узел, который необходимо пропустить черезappendChildдобавить в документ
(2)cloneNodeОбратите внимание, содержит ли скопированный узел дочерние узлы и проблемы с привязкой событий.
(3) использоватьcreateDocumentFragmentдля решения проблем с производительностью при добавлении большого количества узлов

API модификации 5 страниц

Ранее мы упоминали API создания узлов, они просто создают узлы, на самом деле они не изменяют содержимое страницы, а вызывают appendChild, чтобы добавить его в дерево документа. Здесь я классифицирую этот тип контента, который будет изменен на странице, как категорию.
API для изменения содержимого страницы в основном включают:appendChild,insertBefore,removeChild,replaceChild.

5.1 appendChild

appendChildМы использовали его много раз раньше, чтобы добавить указанный узел в конец дочерних элементов узла, вызвавшего метод.

грамматика

  parent.appendChild(child);

Дочерний узел будет последним дочерним узлом родительского узла.
appendChildЭтот метод очень прост, но есть еще одна вещь, на которую следует обратить внимание: если добавленный узел является узлом, существующим на странице, узел будет добавлен в указанное место после выполнения, а узел будет удален из исходного То есть на странице одновременно не будет двух узлов, что равносильно перемещению узла в другое место.
Если дочерний элемент привязан к событию, он по-прежнему будет привязан к событию при перемещении.

пример:

<body>
  <div id="child">
    要被添加的节点
  </div>
  <br/>
  <br/>
  <br/>
  <div id="parent">
    要移动的位置
  </div>		
  <input id="btnMove" type="button" value="移动节点" />
</body>
<script>
  document.getElementById("btnMove").onclick = function(){
	  var child = document.getElementById("child");
 	  document.getElementById("parent").appendChild(child);
  } 
</script>

результат операции:

5.2 insertBefore

insertBeforeИспользуется для добавления узла перед ссылочным узлом.

грамматика

  parentNode.insertBefore(newNode,refNode);

parentNodeУказывает родительский узел после добавления нового узлаnewNodeУказывает узел для добавленияrefNodeУказывает ссылочный узел, новый узел будет добавлен перед этим узлом

пример:

<body>
  <div id="parent">
    父节点
    <div id="child">				
        子元素
    </div>
  </div>
  <input type="button" id="insertNode" value="插入节点" />
</body>
<script>
  var parent = document.getElementById("parent");
  var child = document.getElementById("child");
  document.getElementById("insertNode").onclick = function(){
  	var newNode = document.createElement("div");
  	newNode.textContent = "新节点"
  	parent.insertBefore(newNode,child);
  }
</script>

результат операции:

Есть еще несколько моментов, которые следует отметить относительно второго узла ссылки на параметр:
(1) refNode является обязательным, если этот параметр не передан, будет сообщено об ошибке
(2) Если refNode не определен или равен нулю, insertBefore добавит узел в конец дочернего элемента.

5.3 removeChild

Удалить указанный дочерний узел и вернуться

грамматика

  var deletedChild = parent.removeChild(node);

deletedChildссылка на удаленный узел, который равенnode, удаленный узел все еще существует в памяти и может быть использован в дальнейшем.
Примечание. Если удаленный узел не является его дочерним, программа сообщит об ошибке. Мы можем гарантировать удаление:

if(node.parentNode){
    node.parentNode.removeChild(node);
}

результат операции:

Получить родительский узел узла через сам узел, а затем удалить себя

5.4 replaceChild

replaceChildИспользуется для замены одного узла другим

грамматика

  parent.replaceChild(newChild,oldChild);

newChildзамененный узел, новый узел или узел на странице, если это узел на странице, он будет перемещен в новое местоoldChildзамененный узел

пример:

<body>
  <div id="parent">
    父节点
    <div id="child">				
        子元素
    </div>
  </div>
  <input type="button" id="insertNode" value="替换节点" />
</body>
<script>
  var parent = document.getElementById("parent");
  var child = document.getElementById("child");
  document.getElementById("insertNode").onclick = function(){
  	var newNode = document.createElement("div");
  	newNode.textContent = "新节点"
  	parent.replaceChild(newNode,child)
  }

результат операции:

5.5 Обзор API модификации страницы

API модификации страницы — это в основном эти четыре интерфейса, обратите внимание на несколько характеристик:
(1) Является ли это новым или замененным узлом, если новый или замененный узел изначально существует на странице, узел в его исходном положении будет удален, то есть один и тот же узел не может существовать в нескольких позициях на странице. .
(2) Будут ли события, связанные с самим узлом, исчезать и всегда будут сохраняться.

6 API запросов узлов

6.1 document.getElementById

Этот интерфейс очень прост. Он возвращает элемент в соответствии с идентификатором элемента. Возвращаемое значение имеет тип Element. Если элемент не существует, он возвращает null.

грамматика

  var element = document.getElementById(id);

Есть несколько вещей, которые следует учитывать при использовании этого интерфейса:
(1) Идентификатор элемента чувствителен к регистру, обязательно напишите идентификатор элемента
(2) В HTML-документе может быть несколько элементов с одинаковым идентификатором, тогда возвращается первый элемент.
(3) Искать только элементы из документа.Если элемент создан и указан id, но он не добавлен в документ, элемент не будет найден.

пример:

<body>
  <p id="para1">Some text here</p>
  <button onclick="changeColor('blue');">blue</button>
  <button onclick="changeColor('red');">red</button>
</body>
<script>
  function changeColor(newColor) {
    var elem = document.getElementById("para1");
    elem.style.color = newColor;
  }
</script>

результат операции:

6.2 document.getElementsByTagName

Возвращает HTMLCollection, содержащую все элементы с заданным именем тега. Просматривается вся файловая структура, включая корневой узел. Возвращаемая коллекция HTML является динамической, то есть она может автоматически обновляться, чтобы синхронизироваться с деревом DOM без необходимости повторного вызова.document.getElementsByTagName()

грамматика

  var elements = document.getElementsByTagName(name);

(1) Если вы хотите зациклить коллекцию HTMLCollection, лучше всего кэшировать ее длину, потому что длина будет вычисляться каждый раз, когда вы выполняете цикл, а временное кэширование может повысить эффективность.
(2) Если нет указанного тега, интерфейс возвращает не null, а пустую HTMLCollection
(3)nameэто строка, представляющая имя элемента. Специальный символ «*» представляет все элементы.

пример:

<body>
  <div>div1</div>
  <div>div2</div>	
  <input type="button" value="显示数量" id="btnShowCount"/>
  <input type="button" value="新增div" id="btnAddDiv"/>	
</body>
<script>
  var divList = document.getElementsByTagName("div");
  document.getElementById("btnAddDiv").onclick = function(){
  	var div = document.createElement("div");
  	div.textContent ="div" + (divList.length+1);
  	document.body.appendChild(div);
  }
  document.getElementById("btnShowCount").onclick = function(){
    alert(divList.length);
  }
</script>

В этом коде есть две кнопки, одна кнопка предназначена для отображения количества элементов HTMLCollection, а другая кнопка может добавить тег div в документ. Как было сказано ранее, элемент HTMLCollection сразу указывает, что коллекция меняется в любой момент, то есть в документе есть несколько div, которые изменятся в любой момент, когда мы добавим div и затем посетим HTMLCollection, он будет включать этот новый добавленный div.

результат операции:

6.3 document.getElementsByName

getElementsByNameглавным образом путем указанияnameсвойство для получения элемента, оно возвращает мгновенный объект NodeList

грамматика

  var elements = document.getElementsByName(name)

Основные моменты, на которые следует обратить внимание при использовании этого интерфейса:
(1) Возвращаемый объект представляет собой мгновенный NodeList, который изменяется в любое время.
(2) В элементах HTML не все элементы имеютnameсвойства, такие какdivда нетnameатрибут, но если обязательныйdivизnameимущество, которое также может быть найдено
(3) В IE, еслиidУстановите значение, а затем передайтеgetElementsByNameЗначение параметра совпадает со значением id, тогда этот элемент будет найден, поэтому лучше не устанавливать такое же значение дляidа такжеname

пример:

<script type="text/javascript">
  function getElements()
   {
   var x=document.getElementsByName("myInput");
   alert(x.length);
   }
</script>
<body>
  <input name="myInput" type="text" size="20" /><br />
  <input name="myInput" type="text" size="20" /><br />
  <input name="myInput" type="text" size="20" /><br />
  <br />
  <input type="button" onclick="getElements()" value="How many elements named 'myInput'?" />
</body>

результат операции:

6.4 document.getElementsByClassName

Этот API возвращает мгновенную коллекцию HTMLCollection на основе класса элемента.

грамматика

  var elements = document.getElementsByClassName(names); // or:
  var elements = rootElement.getElementsByClassName(names);
  • elementsпредставляет собой живую коллекцию, содержащую все найденные элементы
  • namesэто строка, представляющая список имен классов для сопоставления; имена классов разделены пробелами
  • getElementsByClassNameМожет вызываться для любого элемента, а не толькоdocument.调用这个方法的元素将作为本次查找的根元素

Есть несколько замечаний по этому интерфейсу:
(1) Возвращаемый результат представляет собой мгновенную коллекцию HTMLCollection, которая может измениться в любое время в соответствии со структурой документа.
(2) Браузеры ниже IE9 не поддерживают
(3) Если вы хотите получить более 2classname, вы можете передать несколькоclassname, каждый из которых разделен пробелом, например.

  var elements = document.getElementsByClassName("test1 test2");

пример:

  • получить всеclassэлемент для «теста»
  var elements = document.getElementsByClassName('test');
  • получить всеclassЭлементы, которые включают как «красный», так и «тест»
  var elements = document.getElementsByClassName('red test');
  • существуетidПолучить все дочерние узлы элемента, который является «основным»classэлемент для «теста»
  var elements = document.getElementById('main').getElementsByClassName('test');
  • Мы также можем использовать произвольный HTMLCollectionArray.prototypeМетод вызывается с передачей HTMLCollection в качестве параметра метода. Здесь мы найдем всеclassдля теста'divэлемент:
  var testElements = document.getElementsByClassName('test');
  var testDivs = Array.prototype.filter.call(testElements, function(testElement){
    return testElement.nodeName === 'DIV';;
  });

6.5 document.querySelectorа такжеdocument.querySelectorAll

Два API очень похожи, черезcss-селекторЧтобы найти элемент, обратите внимание, что селектор должен соответствовать правилам селекторов CSS

  • 6.5.1 document.querySelector

document.querySelectorВозвращает первый совпадающий элемент или, если совпадающий элемент отсутствует, возвращаетnull

грамматика

  var element = document.querySelector(selectors);

Обратите внимание, что, поскольку возвращается первый соответствующий элемент, этот API использует поиск в глубину для получения элемента.

пример:

<body>
  <div>
    <div>
      <span class="test">第三级的span</span>	
    </div>
  </div>
  <div class="test">			
    同级的第二个div
  </div>
  <input type="button" id="btnGet" value="获取test元素" />
</body>
<script>
  document.getElementById("btnGet").addEventListener("click",function(){
    var element = document.querySelector(".test");
    alert(element.textContent);
  })
</script>

дваclassоба содержат элементы «тест», один в начале дерева документов, но на третьем уровне, а другой в конце дерева документов, но на первом уровне, черезquerySelector获取元素时，它通过深度优先搜索，拿到文档树前面的第三级的元素。 результат операции:

  • 6.5.2 document.querySelectorAllВозвращает все соответствующие элементы и множество селекторов совпадают

грамматика

  var elementList = document.querySelectorAll(selectors);
  • elementListявляется статическимNodeListтип объекта
  • selectorsпредставляет собой строку, соединенную запятыми, содержащую один или несколько селекторов CSS.
  • еслиselectorsЕсли параметр содержит псевдоэлементы CSS, верните пустойelementList

пример:

  var matches = document.querySelectorAll("div.note, div.alert");

Возвращает все в документеclassдля"note"или"alert"изdivэлемент

<body>
  <div class="test">
    class为test
  </div>
  <div id="test">
    id为test
  </div>
  <input id="btnShow" type="button" value="显示内容" />
</body>
<script>
  document.getElementById("btnShow").addEventListener("click",function(){
	var elements = document.querySelectorAll("#test,.test");	
	for(var i = 0,length = elements.length;i<length;i++){
		alert(elements[i].textContent);
	}	
  })
</script>

Этот код проходитquerySelectorAllДва элемента выбираются с помощью селектора идентификатора и селектора класса и выводятся последовательно. Обратите внимание на два момента:
(1) querySelectorAll также через порядок поиска в глубину, не зависящий от порядка элементов и поиска селектора
(2) То, что возвращается, является немгновенным NodeList, что означает, что результат не изменится при изменении дерева документа.
Проблемы совместимости:querySelectorа такжеquerySelectorAllБраузеры ниже ie8 не поддерживаются.

результат операции:

Реляционный API 7 узлов

Отношения между каждым узлом в HTML-документе могут рассматриваться как генеалогические отношения включают отношения родитель-дочерний, родные отношения и т. Д.

7.1 Родительский реляционный API

7.1.1 parentNode

Каждый узел имеет свойство parentNode, которое представляет родительский узел элемента. Родительским узлом элемента может быть Element, Document или DocumentFragment.

7.1.2 parentElement

Возвращает узел родительского элемента элемента, отличие от parentNode в том, что его родительский узел должен быть элементом, если нет, он возвращает null

7.2 Субреляционный APPI

7.2.1 childNodes

Возвращает мгновенный odelist, представляет список дочерних узлов, а детский узел может содержать текстовые узлы, узлы аннотации и т. Д.

7.2.2 дети:

Мгновенная коллекция HTMLCollection, все дочерние узлы являются элементами, которые не поддерживаются браузерами ниже IE9.childrenСвойство доступно только для чтения, а тип объекта — HTMLCollection, вы можете использоватьelementNodeReference.children[1].nodeNameчтобы получить имя тега дочернего элемента

7.2.3 firstChild

Свойство только для чтения возвращает первый дочерний элемент узла в дереве или значение null, если узел не имеет дочерних элементов.

7.2.4 lastChild

Возвращает последний дочерний элемент текущего узла. Если родительский узел является узлом элемента, дочерний узел обычно является узлом элемента, текстовым узлом или узлом комментариев. Если детей нет, вернутьсяnull

7.2.5 hasChildNodes

Возвращает логическое значение, указывающее, содержит ли текущий узел дочерние узлы.

7.3 Родственный API

7.3.1 previousSibling

Возвращает предыдущий одноуровневый узел текущего узла, в противном случае возвращаетnull
Браузеры с ядром Gecko вставляют текстовый узел в документ везде, где в исходном коде есть пробелы внутри тега.Node.firstChildа такжеNode.previousSiblingметоды, например, могут ссылаться на текстовый узел пробела, а не на то, что ожидает пользователь

7.3.2 previousElementSibling

previousElementSiblingВозвращает предыдущий узел элемента текущего элемента в узлах дочерних элементов его родительского элемента или, если элемент уже является первым узлом элементаnull, это свойство доступно только для чтения. Обратите внимание, что браузеры ниже IE9 не поддерживают

7.3.3 nextSibling

Node.nextSiblingСвойство только для чтения возвращается своему родителюchildNodesузел, непосредственно следующий за ним в списке, или если указанный узел является последним узломnull
Браузеры с ядром Gecko вставляют текстовый узел в документ везде, где в исходном коде есть пробелы внутри тега.Node.firstChildа такжеNode.previousSiblingметоды, например, могут ссылаться на текстовый узел пробела, а не на то, что ожидает пользователь

7.3.4 nextElementSibling

nextElementSiblingВозвращает следующий узел элемента текущего элемента в узлах дочерних элементов его родителя или, если элемент уже является последним узлом элементаnull, это свойство доступно только для чтения. Обратите внимание, что браузеры ниже IE9 не поддерживают

8 API атрибутов элемента

8.1 setAttribute

Задает значение атрибута для указанного элемента. Если свойство уже существует, обновите значение, в противном случае добавьте новое свойство с указанным именем и значением.

грамматика

  element.setAttribute(name, value);

вnameимя свойства,valueявляется характеристическим значением. Если элемент не содержит атрибута, атрибут создается и ему присваивается значение.

пример:

<body>
  <div id="div1">ABC</div>
</body>
<script>  
  let div1 = document.getElementById("div1"); 
  div1.setAttribute("align", "center");
</script>

результат операции:

Если сам элемент содержит указанный атрибут с именем свойства, вы можете назначить доступ к миру атрибута, например, следующие два кода эквивалентны:

  element.setAttribute("id","test");
  element.id = "test";

8.2 getAttribute

getAttribute()Возвращает значение последнего указанного атрибута элемента. Возвращает, если указанное свойство не существуетnullили""(пустой строки)

грамматика

  let attribute = element.getAttribute(attributeName);

attributeсодержитattributeNameСтрока для значения свойства.attributeNameИмя атрибута значения атрибута, которое вы хотите получить

пример:

<body>
  <div id="div1">ABC</div>
</body>
<script>  
  let div1 = document.getElementById("div1");
  let align = div1.getAttribute("align");
  alert(align);
</script>

результат операции:

8.3 removeAttribute

removeAttribute()Удаляет атрибут из указанного элемента

грамматика

  element.removeAttribute(attrName)

attrNameэто строка, имя атрибута, который нужно удалить из элемента

пример:

<body>
  <div id="div1" style="color:red" width="200px">ABC
   </div>
</body>
<script>  
  let div = document.getElementById("div1")
  div.removeAttribute("style");
</script>

перед запускомdivимеетstyle="color:red"свойство, которое удаляется после запуска

результат операции:

9 API стилей элементов

9.1 window.getComputedStyle

Window.getComputedStyle()метод дает значения всех свойств CSS элемента после применения активной таблицы стилей и анализирует любые базовые вычисления, которые могут содержаться в этих значениях. Предполагая, что элемент не устанавливает высоту, а растягивает ее по своему содержимому, тогда, чтобы получить ее высоту, вам нужно использоватьgetComputedStyle

грамматика

  var style = window.getComputedStyle(element[, pseudoElt]);

elementэто элемент, который нужно получить,pseudoEltУказывает псевдоэлемент для сопоставления.
вернутьstyleявляется объектом CSSStyleDeclaration.
пройти черезstyleМожет получить доступ к вычисляемому стилю элемента

9.2 getBoundingClientRect

getBoundingClientRectИспользуется для возврата размера элемента и его положения относительно видимого окна браузера.

грамматика

  var clientRect = element.getBoundingClientRect();

clientRectЭто объект DOMRect, включающий в себя левое, верхнее, правое, нижнее, что является расстоянием относительно видимого окна.При изменении положения прокрутки их значения будут меняться. В дополнение к браузерам ниже IE9, он также содержит такие данные, как высота и ширина элементов.

9.3 Непосредственное изменение стиля элемента

пример:

  elem.style.color = 'red';
  elem.style.setProperty('font-size', '16px');
  elem.style.removeProperty('color');

9.4 Динамическое добавление правил стиля

пример:

  var style = document.createElement('style');
  style.innerHTML = 'body{color:red} #top:hover{background-color: red;color: white;}';
  document.head.appendChild(style););

10 Резюме

В JavaScript слишком много API-интерфейсов. Запоминание этих API и их умелое использование очень полезно для изучения JavaScript.

Категории