目录
1、DOM简介
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。
W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。
DOM树:
- 文档:一个页面就是一个文档,DOM中使用document表示
- 元素:页面中的所有标签都是元素,DOM中使用element表示
- 节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM中使用node表示
DOM把以上内容都看做是对象
2、获取元素
2.1、根据ID获取元素
使用getElementByld()方法可以获取带有ID的元素对象。
document.getElementById ( ' id' ) ;
使用console.dir()可以打印我们获取的元素对象,更好的查看对象里面的属性和方法
2.2、根据标签名获取
使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。
document.getElementsByTagName ( '标签名');
注意:
1. 因为得到的是一个对象的集合,所以我们想要操作里面的元素就需要遍历。
2. 得到元素对象是动态的
2.3、通过HTML5新增的方法获取
1. document.getElementsByClassName ( '类名');//根据类名返回元素对象集合
2. document.querySelector( 选择器'); //根据指定选择器返回第一个元素对象
3.document.queryselectorA11('选择器') ; //根据指定选择器返回
注意:
querySelector和 querySelectorAll里面的选择器需要加符号,比如:document. querySelector('#nav');
2.4、获取特殊元素
获取body元素
1. doucumnet.body //返回body元素对象
获取html元素
1. document.documentElement //返回html元素对象
3、常见的鼠标事件
鼠标事件 | 触发条件 |
onclick | 鼠标点击左键触发 |
onmouseout | 鼠标经过触发 |
onmouseout | 鼠标离开触发 |
onfocus | 获得鼠标焦点触发 |
onblur | 失去鼠标焦点触发 |
onmousemove | 鼠标移动触发 |
onmouseup | 鼠标弹起触发 |
onmousedown | 鼠标按下触发 |
4、操作元素
JavaScript的DOM操作可以改变网页内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性
4.1、改变元素内容
element .innerText
从起始位置到终止位置的内容,但它去除 html标签,同时空格和换行也会去掉
element .innerHTML
起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行
4.2、样式属性操作
我们可以通过JS修改元素的大小、颜色、位置等样式。
1. element.style 行内样式操作
2. element.className 类名样式操作
注意:
- JS里面的样式采取驼峰命名法比如fontSize、backgroundColor
- JS 修改style 样式操作,产生的是行内样式,cSs权重比较高
- 如果样式修改较多,可以采取操作类名方式更改元素样式。
- class因为是个保留字,因此使用className来操作元素类名属性
- className会直接更改元素的类名,会覆盖原先的类名。
4.3、排他思想
如果有同一组元素,我们想要某一个元素实现某种样式,需要用到循环的排他思想算法:
1.所有元素全部清除样式(干掉其他人)
2.给当前元素设置样式(留下我自己)
3.注意顺序不能颠倒,首先干掉其他人,再设置自己
4.4、自定义属性的操作
1.获取属性值
element.属性获取属性值。
element.getAttribute ( '属性');
2.设置属性值
element.属性=值’设置内置属性值。
element .setAttribute ( '属性','值') ;
3.移除属性
element .removeAttribute( '属性');
5、节点操作
5.1、节点概述
一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。
- 元素节点nodeType 为1
- 属性节点nodeType为2
- 文本节点nodeType为3(文本节点包含文字、空格、换行等)
我们在实际开发中,节点操作主要操作的是元素节点
5.2、节点层级
利用DOM树可以把节点划分为不同的层级关系,常见的是父子兄层级关系。
1、父级节点
node.parentNode
- parentNode 属性可返回某节点的父节点,注意是最近的一个父节点
- 如果指定的节点没有父节点则返回null
2、子级节点
1. parentNode.childNodes(标准)
parentNode.childNodes返回包含指定节点的子节点的集合,该集合为即时更新的集合。
注意:返回值里面包含了所有的子节点,包括元素节点,文本节点等。
如果只想要获得里面的元素节点,则需要专门处理。所以我们一般不提倡使用childNodes
var ul = document. queryselector ( 'ul’ );
for (var i = 0; i < ul.childNodes. length; i++){
if (ul.childNodes [i ].nodeType == 1){
//ul.childNodes[i]是元素节点
console.log (ul.childNodes [i] );
}
}
2. parentNode.children((非标准)
parentNode.children是一个只读属性,返回所有的子元素节点。它只返回子元素节点,其余节点不返回(这个是我们重点掌握的)。
虽然children是一个非标准,但是得到了各个浏览器的支持,因此我们可以放心使用
3. parentNode.firstChild
firstChild返回第一个子节点,找不到则返回null。同样,也是包含所有的节点。
4. parentNode . 1astChild
lastChild返回最后一个子节点,找不到则返回null。同样,也是包含所有的节点。
5. parentNode .firstElementchild
firstElementChild返回第一个子元素节点,找不到则返回nulI。
6. parentNode . lastElementChild
lastElementChild返回最后一个子元素节点,找不到则返回null。
注意:这两个方法5和6有兼容性问题,IE9以上才支持。
实际开发中,firstchild和lastchild 包含其他节点,操作不方便,而firstElementChild和lastElementchild 又有兼容性问题,那么我们如何获取第一个子元素节点或最后一个子元素节点呢?
解决方案:
1.如果想要第一个子元素节点,可以使用parentNode. chilren [ 0]
2.如果想要最后一个子元素节点,可以使用parentNode.chilren [parentNode.chilren.length - 1]
3.兄弟节点
1. node.nextSibling
nextSibling 返回当前元素的下一个兄弟元素节点,找不到则返回null。同样,也是包含所有的节点。
2. node.previoussibling
previousSibling返回当前元素上一个兄弟元素节点,找不到则返回null。同样,也是包含所有的节点。
3. node.nextElementSibling
nextElementSibling返回当前元素下一个兄弟元素节点,找不到则返回null。
4. node.previousElementSibling
previousElementSibling返回当前元素上一个兄弟节点,找不到则返回null。
注意:这两个方法3和4有兼容性问题,IE9 以上才支持。
5.3、创建节点
document.createElement ( 'tagName ' )
document.createElement()方法创建由tagName指定的HTML元素。因为这些元素原先不存在,是根据我们的需求动态生成的,所以我们也称为动态创建元素节点。
5.4、添加节点
1. node .appendChild (child)
node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素。
2. node .insertBefore (child,指定元素)
node.insertBefore()方法将一个节点添加到父节点的指定子节点前面。类似于css里面的 before伪元素。
5.5、删除节点
node. removeChild ( child)
node.removeChild()方法从DOM中删除一个子节点,返回删除的节点。
5.6、复制节点
node.cloneNode ( )
node.cloneNode ( )方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点
注意:
1.如果括号参数为空或者为false,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点。
2.如果括号参数为true,则是深度拷贝,会复制节点本身以及里面所有的子节点。
5.7、三种动态创建元素区别
- document.write ()
- element.innerHTML
- document .createElement ()
区别:
1. document.write是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘
2. innerHTMI是将内容写入某个DOM节点,不会导致页面全部重绘
3. innerHTML创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂
4. createElement ()创建多个元素效率稍低一点点,但是结构更清晰
总结:不同浏览器下, innerHTML,效率要比creatFlement高