2021-02-25 html 操作DOM相关的知识

1. previousSibling

• 用法
  element.previousSibling
• 注意
  previousSibling 属性返回同一树层级中指定节点的前一个节点。
  被返回的节点以 Node 对象的形式返回。
  注释：如果没有 previousSibling 节点，则返回值是 null。

2. appendChild

• 用法
  element.appendChild(node)
• 注意
  返回被添加的节点

3. attributes

• 用法
  element.attributes
• 注意
  attributes 属性返回指定节点的属性集合，即 NamedNodeMap。

试一下

截屏2021-02-25 下午9.24.28.png

4.className

• 用法
  element.className=classname
• 注意
  返回当前节点的class属性，string

5.cloneNode

• 用法
  element.cloneNode(bool)
• 注意
  cloneNode() 方法创建节点的拷贝，并返回该副本。
  cloneNode() 方法克隆所有属性以及它们的值。
  如果您需要克隆所有后代，请把 deep 参数设置 true，否则设置为 false。

6.className

• 用法
  element. compareDocumentPosition(node)

var p1=document.getElementById("p1");
var p2=document.getElementById("p2");
p1.compareDocumentPosition(p2);

• 注意
  compareDocumentPosition() 方法比较两个节点，并返回描述它们在文档中位置的整数。
  请看上面的例子。返回值可能是：
  1：没有关系，两个节点不属于同一个文档。
  2：第一节点（P1）位于第二个节点后（P2）。
  4：第一节点（P1）定位在第二节点（P2）前。
  8：第一节点（P1）位于第二节点内（P2）。
  16：第二节点（P2）位于第一节点内（P1）。
  32：没有关系，或是两个节点是同一元素的两个属性。
  注释：返回值可以是值的组合。例如，返回 20 意味着在 p2 在 p1 内部（16），并且 p1 在 p2 之前（4）。

7. contentEditable

• 用法
  element.contentEditable=true|false
• 注意
  contentEditable 属性设置或返回元素内容是否可编辑。
  提示：您也可以使用 isContentEditable 属性来查明元素内容是否可编辑。

8.dir

• 用法
  element.dir=text-direction
• 注意
  dir 属性设置或返回元素的文本方向

9. firstChild

• 用法
  element. firstChild
• 注意
  firstChild 属性返回指定节点的首个子节点，以 Node 对象。
  注释：在 HTML 中，文本本身是 HTML 元素的父节点，HEAD 和 BODY 是 HTML 元素的子节点。

10. getAttribute

• 用法
  element.getAttribute(attrName)
• 注意
  getAttribute() 方法返回指定属性名的属性值。

11. getAttributeNode

• 用法

document.getElementsByTagName("a")[0].getAttributeNode("target");

12. getElementsByTagName

• 用法
  element. getElementsByTagName(TagName)
• 注意
  getElementsByTagName() 方法返回具有指定标签名的元素子元素集合，以 NodeList 对象。*返回所有元素

13. hasAttribute/hasAttributes

• 用法
  element.hasAttribute(attrName) / element.hasAttributes()
• 注意
  hasAttribute 如果存在指定属性，则 hasAttribute() 方法返回 true，否则返回 false。
  hasAttributes 如果指定节点拥有属性，则 hasAttributes() 方法返回 true，否则返回 false。

14. hasChildNodes

• 用法
  element.hasChildNodes()
• 注意
  hasChildNodes() 方法返回 true，如果指定节点拥有子节点，否则返回 false。

15. insertBefore

• 用法

document.getElementById("myList").insertBefore(newItem,existingItem);

• 注意
  insertBefore() 方法在您指定的已有子节点之前插入新的子节点。
  提示：如果您希望创建包含文本的新列表项，请记得创建文本节点形式的文本，以便追加到 LI 元素中，然后向列表插入这个 LI。
  您也可以使用 insertBefore 方法插入/移动已有元素。

16. isEqualNode

• 用法
  element. isEqualNode(node)
• 注意
  isEqualNode() 方法检查两个节点是否相等。
  如果下例条件为 true，则两个节点相等：
  节点类型相同
  拥有相同的 nodeName、NodeValue、localName、nameSpaceURI 以及前缀
  所有后代均为相同的子节点
  拥有相同的属性和属性值（属性次序不必一致）

17. isSameNode

• 用法
  element. isSameNode(node)
• 注意
  isSameNode() 方法检查两节点是否是相同的节点。
  isSameNode() 方法返回 true，如果两节点是相同的节点，否则返回 false。

18. lastChild

• 用法
  element.lastChild
• 注意
  lastChild 属性返回指定节点的最后一个子节点，以 Node 对象。

19. nextSibling

• 用法
  element.nextSibling
• 注意
  nextSibling 属性返回指定节点之后紧跟的节点，在相同的树层级中。
  被返回的节点以 Node 对象返回。
  注释：如果没有 nextSibling 节点，则返回值为 null。

20. nodeName

• 用法
  element. nodeName
• 注意
  nodeName 属性指定节点的节点名称。
  如果节点是元素节点，则 nodeName 属性返回标签名。
  入股节点是属性节点，则 nodeName 属性返回属性的名称。
  对于其他节点类型，nodeName 属性返回不同节点类型的不同名称。

21. normalize

• 用法
  element.normalize()
• 注意
  normalize() 方法移除空的文本节点，并连接相邻的文本节点。

22. parentNode

• 用法
  element.parentNode
• 注意
  parentNode 属性以 Node 对象的形式返回指定节点的父节点。
  如果指定节点没有父节点，则返回 null。

23. removeAttribute

• 用法
  element.removeAttribute(name)
• 注意
  removeAttribute() 方法删除指定的属性。
  此方法与 removeAttributeNode() 方法的差异是：removeAttributeNode() 方法删除指定的 Attr 对象，而此方法删除具有指定名称的属性。结果是相同的。同时此方法不返回值，而 removeAttributeNode() 方法返回被删除的属性，以 Attr 对象的形式。

24. removeChild

• 用法
  element.removeChild(node)
• 注意
  removeChild() 方法指定元素的某个指定的子节点。
  以 Node 对象返回被删除的节点，如果节点不存在则返回 null。

25. replaceChild

• 用法
  element.replaceChild(newnode,oldnode);
• 注意
  replaceChild() 方法用新节点替换某个子节点。
  这个新节点可以是文档中某个已存在的节点，或者您也可创建新的节点。

25. textContent

• 用法

document.getElementsByTagName("BUTTON")[0].textContent;

• 注意
  textContent 属性设置或返回指定节点的文本内容，以及它的所有后代。
  如果您设置了 textContent 属性，会删除所有子节点，并被替换为包含指定字符串的一个单独的文本节点。
  提示：有时，此属性可用于取代 nodeValue 属性，但是请记住此属性同时会返回所有子节点的文本。