DOM简介
DOM文档对象模型 document Object Model,W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。通过DOM接口可以改变网页的内容、结构和样式。
DOM树
文档:一个页面就是一个文档 document
元素:页面中的所有标签都是元素,element
节点:网页中的所有内容(标签、属性、文本、注释等),node
DOM把以上内容看做对象
获取元素
根据ID
根据标签名
通过HTML5新增方法获取
特殊元素获取
根据ID获取
document.getElementById(‘id’);
根据标签名获取
document.getElementsByTagName(‘标签名’);
返回带有指定标签名的对象的集合
注意:
1.因为得到的是一个对象的集合,所有我们想要操作里面的元素就需要遍历
2.得到元素对象是动态的
3.如果获取不到元素,则返回为空的伪数组(因为我们获取不到对象)
element.getElementsByTagName(‘标签名’);获取某个元素(父元素)n内部所有指定标签名的子元素
注意:父元素必须是单个对象(必须指明是哪一个元素对象),获取的时候不包括父元素自己。
通过HTML5新增方法获取
document.getElementsByClassName(‘类名’); //根据类名返回元素对象集合
document.querySelector(‘选择器’); //根据指定选择器返回第一个元素对象
document.querySelectorAll(‘选择器’); //根据指定选择器返回 返回伪数组
注意:querySelector和querySelectorAll里面的选择器需要加符号,比如:document.querySelector(’#nav’);
获取特殊元素(body、html)
获取body
document.body //返回body元素对象
获取html元素
document.documentElement //返回html元素对象
事件基础
事件3要素:
1.事件源
2.事件类型
3.事件处理程序
执行事件的步骤:
1.获取事件源
2.注册事件(绑定事件)
3.添加事件处理程序(采用函数赋值形式)
常见鼠标事件
鼠标事件 | 触发条件 |
---|---|
onclick | 点击左键触发 |
onmouseover | 经过触发 |
onmouseout | 离开触发 |
onfocus | 获得鼠标焦点触发 |
onblur | 失去鼠标焦点触发 |
onmousemove | 鼠标移动触发 |
onmouseup | 鼠标弹起触发 |
onmousedown | 鼠标按下触发 |
操作元素
改变元素内容
element.innerText
从起始位置到终止位置的内容,去除html标签,换行和空格也会去掉
element.innerHTML
起始位置到终止位置的全部内容 包括html标签,同时保留空格和换行
常见元素的属性操作
1.innerText、innerHTML改变元素内容
2.src、href
3.id、alt、title
表单元素的属性操作
利用DOM可以操作如下表单属性:
type、value、checked、selected、disabled
样式属性操作
element.style 行内样式操作
element.className 类名样式操作
如果样式修改较多,可以采取操作类名方式更改元素样式。
className会直接更改元素的类名,会覆盖原先的类名
排他思想
如果有同一组元素,我们想要某一个元素实现某种样式,需要用到循环的排他思想算法
1.所有元素全部清除样式(干掉其他人)
2.给当前元素设置样式(保留自己)
3.注意顺序不能颠倒(首先,干掉其他人。再设置自己)
自定义属性的操作
1.获取属性值
- element.属性
- element.getAttribute(‘属性’);
区别:
- element.属性 获取内置属性值(元素本身自带的属性)
- element.getAttribute(‘属性’); 主要获得自定义的属性(标准)我们程序员自定义的属性
2.设置属性值
- element.属性 =‘值’
- element.getAttribute(‘属性’,‘值’);
3.移除属性
element.removeAttribute(‘属性’);
H5自定义属性
自定义属性目的:是为了保持并使用数据。有些数据可以保存到页面中而不用存到数据库中
1.设置H5自定义属性
H5规定自定义属性data-开头做为属性名并赋值
比如<div data-index='1'></div>
或者使用JS设置
element.setAttribute(‘data-index’,2);
2.获取H5自定义属性
兼容性获取 element.getAttribute(‘data-index’)
H5新增element.dataset.index 或者 element.dataset[‘index’]
节点操作
节点概述:
一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)、nodeValue(节点值)这3个基本属性
- 元素节点 nodeType为1
- 属性节点 nodeType为2
- 文本节点 nodetype为3(文本节点包含文字、空格、换行等)
实际开发中,节点操作主要操作的是元素节点
节点层级
常见的是父子兄层级
1.父级节点
node.parentNode
parentNode属性可返回某节点的父节点,注意是最近的一个父节点
如果指定的节点没有父节点则返回null
2.子节点
parentNode.childNodes (标准)
返回包含指定节点的子节点的集合,该集合为即使更新的集合
返回值包含了所有的子节点,包括元素节点、文本节点等
不推荐
parentNode.children(非标准)
是一个只读属性 返回所有的子元素节点。其余节点不返回推荐
没有兼容性问题
parentNode.firstElementChild 返回以第一个子元素节点 找不到返回null
parentNode.lastElementChild 返回以最后一个子元素节点 找不到返回null
这两个方法都要兼容性问题,ie9以上支持
推荐:
1.如果想要第一个子元素节点 parentNode.children[0]
2.如果想要最后一个子元素节点 使用parentNode.children[parentNode.children.length-1];
3.兄弟节点
node.nextElementSibling
返回当前元素下一个兄弟元素节点,找不到返回null
node.previousElementSibling
返回当前元素上一个兄弟节点,找不到返null
这两个方法都有兼容性问题
我们可以自己封装一个兼容性函数
function getNextElementSibling(element){
var el=element;
while(el=el.nextSibling){
if(el.nodeType==1){
return el;
}
}
return null;
}
创建节点
document.creatElement(‘tagName’)
增
node.appendChild(child)
node.appendChild()方法将一个节点添加到指定父节点的子节点的列表末尾
node.insertBefore(child,指定元素)将一个节点添加到父节点的指定子节点的前面
DOM重点核心
创建
document.write
innerHTML
createElement
增
appendChild
insertBefore
删
removeChild
改
1.修改元素属性:src、href、title
2.修改普通元素内容:innerHTML、innerText
3.修改表单元素:value、type、disabled
4.修改元素样式:style、className
查
1.DOM提供的API方法:getElementById、getElementsByTagName 古老用法、不推荐
2.H5新增用法:querySelector、querySelectorAll 提倡
3.利用节点操作获取元素
父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling)提倡
属性操作
setAttribute:设置dom属性值
getAttribute:得到dom属性值
removeAttribute移除属性