摸鱼不如来了解一下--DOM文档对象模型|8月更文挑战

697 阅读2分钟

这是我参与8月更文挑战的第18天,活动详情查看:8月更文挑战

Web API

DOM文档对象模型(document object model)

W3C定义了一系列DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式

DOM树

●   文档:一个页面就是一个文档,DOM中用document表示

●   元素:页面中所有标签都是元素,DOM中用element表示

●   节点:网页中所有内容都是节点(标签、属性、文本、注释等),DOM中用node表示

图片.png

DOM获取页面元素

根据ID获取

var element = document.getElementById('id');

●   element是一个Element对象

●   id 是大小写敏感的字符串

●   返回值是一个DOM的Element对象,若在Document下没有找到则返回null

●   console.dir();打印对象,可以更好的查看对象的属性和方法

根据标签名获取

●   var 变量 = document.getElementsByTagName('标签名');  能够获取页面中所有目标标签

●   返回的是元素对象的集合,以伪数组的形式存储的;若页面没有该元素 ,返回的是一个空的伪数组,使用的时候注意带下标

●   还可以根据某个元素(父元素)内部所有指定标签名的子元素

●   element.getElementsByTagName( 标签名)

●   注意:父元素必须是单个元素(必须指明是哪一个元素对象,要先获取指定的父元素),且获取的时候不包括父元素自己

<ol id ="ol"></ol>

图片.png

通过H5新增的方法获取

●   document.getElementsByClassName(' 类名') 根据类名返回对象元素合集,使用的时候要带下标

●   document.querySelector(' 选择器'),返回指定选择器的第一个元素对象。注意!这里面的选择器是要带符号的!类选择器带点,id选择器带井号

●    

图片.png

●   document.querySelectorAll('选择器'),返回指定选择器的所有元素,返回值是NodeList对象,NodeList对象表示节点的集合。可以通过索引访问,下标从0开始。

图片.png

特殊元素获取

获取body和html元素

●   document.body   // 返回body元素对象

●   document.documentElement   // 返回html元素对象