DOM的核心总结

DOM的核心总结

---

1.DOM

文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

dom操作主要针对元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

2.创建

1. document.write
2. innerHTML
   例子：div.innerHTML = '<strong>今天是：</strong> 2021';

innerText 和 innerHTML 的区别

• 获取内容时的区别：
  innerText 会去掉空格和换行，而 innerHTML会保留空格和换行
• 设置内容时的区别：
  innerText 不会识别 html ，而 innerHTML 会识别

3. createElement
   动态创建元素节点：document.createElement(‘tagName’)

3. 增加

1. appendChild
   node.appendChild(child)方法将一个节点添加到指定父节点的子节点列表末尾。类似 css 里面的 after 伪元素。
   例子：var ul = document.querySelector(‘ul’);
   ul.appendChild(li);

2. insertBefore
   node.insertBefore(child,指定元素)方法将一个节点添加到父节点的指定子节点前面。类似 css 里面的 before 伪元素。
   例子：var lili = document.createElement(‘li’);
   ul.insertBefore(lili, ul.children[0]);

4. 删

1. removeChild

5. 改

主要修改 dom 的元素属性，dom 元素的内容、属性、表单的值等。

1. 修改元素属性：src、href、title等
2. 修改普通元素内容：innerHTML、innerText
3. 修改表单元素：value、type、disbled等
4. 修改元素样式：style、className

6. 查

主要获取查询 dom 的元素

1. DOM 提供的 API 方法：getElementById、getElementsByTagName