DOM(文档对象模型)之操作DOM的API总结

DOM(文档对象模型)

1. 什么是DOM

   DOM全称是Document Object Model(文档对象模型)，是为HTML和XML提供的API。DOM把整个页面映射为一个多层次的节点结构。HTML和XML页面中的每一个组成部分都是某种类型的节点。借助DOM提供的API，开发人员可以轻松自如的删除，添加，替换，修改任何节点。DOM 是一个以树状结构存在的内容。DOM 的顶级是 document 表示当前文档。

   window->document->html

2. 获取DOM元素

   • 非常规标签

     1-1. html =>document.documentElement

     1-2. head => document.head (低版本浏览器不兼容)

     1-3. body => document.body

   • 常规标签

     2-1.getElementById()

   ​ => 语法: 查找范围.getElementById(‘id名称’)

   ​ => 查找范围: document 或者一个 元素

   ​ => 返回值:

   ​ -> 如果有这个 id 名匹配的元素, 就是这个元素

   ​ -> 如果没有这个 id 名匹配的元素, 那么就是 null

   2-2. getElementsByTagName()

   ​ => 语法: 查找范围.getElementsByTagName(‘标签名’)

   ​ => 返回值: 是一个伪数组(数组常用方法用不了)

   ​ -> 如果有这个标签名匹配的元素, 有多少获取多少

   ​ -> 如果没有这个标签匹配的元素, 返回一个空的伪数组

   2-3. getElementsByClassName()

   ​ => 语法: 查找范围.getElementsByClassName(‘类名’)

   ​ => 返回值: 是一个伪数组(数组常用方法用不了)

   ​ -> 如果有这个类名匹配的元素, 有多少获取多少

   ​ -> 如果没有这个类名匹配的元素, 返回一个空的伪数组

   2-4. getElementsByName()

   ​ => 语法: 查找范围.getElementsByName(‘元素name属性的值’)

   ​ => 返回值: 是一个伪数组

   ​ -> 如果有元素