1.DOM简介
1.1什么是DOM
文档对象模型简称DOM,W3C组织推荐的处理可扩展标记语言的标准编程接口,通过这些DOM接口可以改变网页的内容,结构和样式。
1.2 DOM树
文档:一个页面就是一个文档,DOM中使用document表示
元素:页面中所有标签都是元素,DOM中使用element表示
节点:网页中所有内容都是节点(标签属性文本注释等),DOM中使用node表示。
Dom把以上内容都看作是对象
2.获取元素
2.1如何获取网页元素
Dom在我们实际开发中主要只用来操作元素
我们如何获取页面中的元素呢?
获取元素可以使用以下几种方法:
- 根据ID获取
- 根据标签名获取
- 通过HTML5新增方法获取
- 特殊元素获取
2.2根据ID获取
使用getElementById(‘id’)方法获取ID的元素对象。
返回一个匹配特定 ID的元素。由于元素的 ID 在大部分情况下要求是独一无二的,这个方法自然而然地成为了一个高效查找特定元素的方法。
getElementById()返回一个匹配特定 ID的元素。
//语法 var element = document.getElementById(id);
//1.因为文档页面是从上往下加载的,所以先有标签,所以JS写在标签下面
//2.参数id是大小写敏感的字符串
//3.返回但是元素对象
//4.驼峰命名法
2.3根据标签名获取
getElementsByTagName()
var timel = document.getElementsByTagName('li');
//1.返回是获取过来的元素对象的集合 以伪数组形式存储
console.log(timel);
console.log(timel[0]);
//2.我们想要依次打印里面的元素对象可以采取遍历的形式
for (i = 0; i < timel.length; i++) {
console.log(timel[i])
}
//3.得到的元素对象是动态的。
//4.如果页面中没有这个元素,返回的是一个空的伪数组。
//5.还可以获取某个父元素内部所有指定标签名的子元素
element.getElementsByTagName('标签名')
var olli = ol.getElementsByTagName('li');//指定ol里面的li元素
console.log(olli);
还可以这样先用ID获取到父元素,然后用标签获取子元素。
var ollist = document.getElementById('yes');
console.log(ollist.getElementsByTagName('li')); //HTMLCollection(4) [li, li, li, li]