文章内容
一.DOM简介
1.什么是DOM
文档对象模型(DocumentObject Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。
2.DOM树
文档:一个页面就是一个文档,DOM中使用document表示。
元素:页面中的所有标签都是元素,DOM中使用element表示。
节点:网面中的所有内容都是节点(标签 属性 文木 注释等)DOM中使用node表示。
二.获取元素
1.根据标签名获取
使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。
document.getElementsByTagName('标签名’);
注意:
1.因为得到的是一个对象的集合,所以我们想要操作里面的元素就需要遍历。
2.得到元素对象是动态的。
还可以获取某个元素(父元素)内部所有指定标签名的子元素。
element.getElementsByTagName('标签名’);
注意:父元素必须是单个对象(必须指明是哪一个元素对象).获取的时候不包括父元素自己。
2.通过HTML5新增的方法获取
document.getElementsByClassName(\类名’);//根据类名返回元素对象集合
document.querySelector('选择器’); // 根据指定选择器返回第一个元素对象
document.querySelectorA11('选择器’); // 根据指定选择器返回
3.获取特殊元素
获取body元素
doucumnet.body // 返回body元素对象
获取html元素
document.documentElement // 返回htm1元素对象
三.事件基础
1.常见的鼠标事件
四.操作元素
1.改变元素内容
element.innerText
从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉。
element.innerHTML
起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行。
2.常用元素的属性操作
1. innerText、innerHTML改变元素内容
2. src、href
3. id、alt、title
3.表单元素的属性操作
利用DOM可以操作如下表单元素的属性:
type、value、checked、selected、disabled
4.样式属性操作
我们可以通过JS修改元素的大小、颜色、位置等样式。
1. element.style 行内样式操作
2. element.className 类名样式操作
注意:
1.如果样式修改较多,可以采取操作类名方式更改元素样式。
3. class因为是个保留字,因此使用1assName来操作元素类名属性。
4. className 会直接更改元素的类名,会覆盖原先的类名。
5.自定义属性的操作
1.获取属性值
element.属性 获取属性值。
element.getAttribute(‘属性’);
区别:
element.属性 获取内置属性值(元素本身自带的属性)
element.getattribute(\属性’);主要获得自定义的属性(标准)我们程序员自定义的属性。
2.设置属性值
element.属性= ‘值’ 设置内置属性值。
element.setAttribute(‘属性’,‘值’);
3.移除属性
element.removeAttribute('属性’);
6.H5自定义属性
自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。自定义属性获取是通过getAttribute(\属性’)获取。但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性。H5给我们新增了自定义属性:
1.设置H5自定义属性
H5规定自定义属性data-开头做为属性名并且赋值。
比如< div data-index=“1”>< /div>
或者使用JS设置
element.setAttribute( ‘data-index’,2)
五.节点操作
1.节点概述
网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM中,节点使用node来表示。HTMLDOM树中的所有节点均可通过JavaScript进行访问,所有HTML元素(节点)均可被修改,也可以创建或删除。
2.三种动态创建元素区别
document.write()
element.innerHTML
document.createElement()
六.DOM重点核心
文档对象模型(DocumentObject Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。
1.对于JavaScript,为了能够使JavaScript操作HTML,JavaScript就有了一套自己的dom编程接口。
2.对于HTML,dom使得html形成一棵dom树.包含文档、元素、节点。
1.创建
1. document.write
2. innerHTML
3. createElement
2.改
主要修改dom的元素属性,dom元素的内容、属性,表单的值等。
1.修改元素属性:src、href、title等
2.修改普通元素内容:innerHTML、innerText
3. 修改表单元素:value、 type、disabled等
4. 修改元素样式:style、className
3.查
主要获取查询dom的元素。
1. DOM提供的API方法:getElementByld、getElementsByTagName古老用法不太推荐
2. H5提供的新方法:querySelector、querySelectorAll 提倡
3.利用节点操作获取元素:父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡