DOM 介绍
文档对象模型(Document Object Model,简称DOM),是 [W3C]组织推荐的处理可扩展标记语言,W3C 已经定义了一系列的 DOM 接口,通过这些 DOM 接口可以改变网页的内容、结构和样式。DOM是W3C组织制定的一套处理html和xml文档的规范,所有的浏览器都遵循了这套标准。可以理解为是一套操作文档的工具箱,通过它可以方便的操作文档。
DOM可以做什么
-
获取文档内容并控制
-
设置标签属性
-
设置标签样式
-
动态创建元素
DOM树
DOM树 又称为文档树模型,把文档映射成树形结构,通过节点对象对其处理,处理的结果可以加入到当前的页面
-
几个专有名词 文档 节点 元素
-
文档:一个页面就是一个文档,DOM中使用document表示
-
节点:网页中的所有内容,在文档树中都是节点(标签节点、属性节点、文本节点、注释节点)node
-
元素:网页中的所有标签,通常称为元素节点,又简称为“元素”,使用element表示 标签节点又叫做标签元素
-
获取元素
-
getElementById
-
<div id="container">我是一个div</div> <script> var con = document.getElementById('container') </script>
-
因为我们的文档页面从上往下加载,所以先得有div标签 所以我们的script写到div标签的下面
-
get 获得 element 元素 by 通过 采用的是驼峰命名法
-
参数id是大小写敏感的字符串
-
返回的是一个元素对象或者是null空对象
-
-
getElementsByTagName
-
<div id="container">我是一个div</div> <span>我是一个span标签</span> <script> var con = document.getElementsByTagName('div') var spans = document.getElementsByTagName('span') </script>
-
返回的是 获取过来元素对象的集合,以伪数组的形式存储的 tag标签
-
我们想要依次打印出里面的元素对象 我们可以采取遍历的方式
-
element.getElementsByTagName() 可以得到这个元素里面的某些标签
-
-
H5 新增的方法
-
getElementsByClassName
-
<div class="box">盒子</div> <div class="box">盒子</div> <div id="nav"> <ul> <li>首页</li> <li>产品</li> </ul> </div> <script> var boxs = document.getElementsByClassName('box'); </script>
-
getElementsByClassName('选择器') 根据类名获取某些元素集合 选择器前面不用加符号
-
-
querySelector
-
<div class="box">盒子</div> <div class="box">盒子</div> <div id="nav"> <ul> <li>首页</li> <li>产品</li> </ul> </div> <script> var firstBox = document.querySelector('#nav'); </script>
-
querySelector('.box') 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav li
-
-
querySelectorAll
-
<div class="box">盒子</div> <div class="box">盒子</div> <div id="nav"> <ul> <li>首页</li> <li>产品</li> </ul> </div> <script> var allBox = document.querySelectorAll('.box'); </script>
-
querySelectorAll() 返回指定选择器的所有元素对象集合
-
-
-
获取body和html两个特殊元素
-
获取body元素
-
var bodyEle = document.body;
-
这个script标签放到body里面 放在title下面就是null 找不到body
-
-
获取html元素
-
var htmlEle = document.documentElement;
-
不是简单的
var htmlEle = document.html
这是错误的写法
-
-