DOM Operate

[HuangHongRui]

🍼持续更新

---

. dom对象的innerText和innerHTML有什么区别？

均可读可写 innerHTML 属性主要用于获取当前元素节点(nodeElement)的内部元素节点 innerText 属性主要用于获取元素(nodeElement)的内部文本元素(TextNode)

---

. elem.children和elem.childNodes的区别？

elem.children是一个只读属性，返回 一个Node的子元素 的 HTMLCollection 。 elem.childNodes返回包含指定节点的子节点的集合，该集合为即时更新的集合（live collection）。

• elem.children返回的将是元素子节点，而childNodes将返回所有的子节点类型，包括一大堆的换行和空格的#text节点,一般情况建议使用children,这样通过数组的下标更能精准的访问每一个子节点.

---

.查询元素有几种常见的方法？ES5的元素选择方法是什么?

• getElementById
• getElementsByClassName
• getElementsByTagName
• [getElementsByName](https://developer.mozilla.org/zh- CN/docs/Web/API/Document/getElementsByName)
• Es5：（下面可以更方便的通过使用CSS选择器来查找元素）
• querySelector
• querySelectorAll

---

.如何创建一个元素？如何给元素设置属性？如何删除属性

• createElement //创建一个元素
• createTextNode //创建一个文本
• setAttribute(Name, Name)
• removeAttribute(Name, Value)

---

.如何给页面元素添加子元素？如何删除页面元素下的子元素?

• createElement
• appendChild
• removeChild

---

. element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?

• Element.classList 是一个只读属性，返回一个元素的类属性的实时 DOMTokenList集合。该属性可用于在元素中添加，移除及切换 CSS 类，classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。
• add( String [, String] ) 添加指定的类值。如果这些类已经存在于元素的属性中，那么它们将被忽略。
• remove( String [,String] ) 删除指定的类值。
• item ( Number ) 按集合中的索引返回类值。
• toggle ( String [, force] ) [1] 当只有一个参数时：切换 class value; 即如果类存在，则删除它并返回false，如果不存在，则添加它并返回true。 [2] 当存在第二个参数时：如果第二个参数的计算结果为true，则添加指定的类值，如果计算结果为false，则删除它
• contains( String ) 检查元素的类属性中是否存在指定的类值。

---

.如何选中如下代码所有的li元素？ 如何选中btn元素？

• querySelectorAll()
• getElementsByTagName()
• getElementsByClassName()

---