一、DOM
-DOM,全称Document Object Model文档对象模型
-js中通过DOM来对HTMl文档进行操作.只要了解了DOM就可以随心所欲的操作WEB页面。
-文档 文档表示的就是整个HTML网页文档
-对象 对象表示将网页中的每一个部分都转化为一个对象
-模型 使用模型来表示对象之间的关系,这样方便我们获取对象
二、节点
节点Node,是构成我们网页的最基本的组成部分,网页中的每一部分都可以称为是一个节点。
比如:html标签、属性、文本、注释、整个文档等都是一个节点。
节点:Node是构成HTML文档最基本的单元
常用的节点分为四类:
文档节点:整个HTML文档
元素节点:HTML文档中的HTML标签
属性节点:元素的属性
文本节点:HTML标签中的文本内容。
三、获取元素节点
通过document对象调用
1.getElementById()
-通过id属性获取一个元素节点对象
2.getElementsByTagName()
-通过标签名获取一组元素节点对象
可以根据标签名来获取一组元素节点对象,这个方法给我们返回一个类数组对象,所有查询到的元素都会封装到对象中。
3.getElementsByName()
-通过name属性获取一组元素节点对象
可以根据标签名来获取一组元素节点对象,这个方法给我们返回一个类数组对象,所有查询到的元素都会封装到对象中。
如果需要读取元素属性,直接使用 元素.属性名
例子:元素.id 元素.name 元素.value
注意:class不能采用这中方式,读取class属性是需要使用元素.className
四、获取元素节点的子节点
通过具体的元素节点调用
1.getElementsByTagName();
方法,返回当前节点的指定标签名后代节点
2.chilNodes
属性,表示当前节点的所有子节点
3.firstChild
属性,表示当前节点的第一个子节点(包括空白文本节点)
4.lastChild
属性,表示当前节点的最后一个子节点
五、dom的其他操作
1.document.all 代表页面的所有元素
2.document.getElementsByClassName("large") (ie9以上才会进行支持)
根据元素的的class属性值查询一组元素节点对象
3.document.querySelector(".box1 div")(ie8以上)
需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一个元素节点对象,使用该方法总会
返回唯一的一个元素,如果满足条件的元素有多个,那么它只会返回第一个元素
4.document.querySelectorAll()
该方法和querySelector()用法类似,不同的是它会将符合条件的元素封装到一个数组中,即使符合条件的元素只有一个,也会返回一个数组
5.document.createElement("");
document.createElement()可以创建一个元素节点对象,他需要一个标签名作为参数,将会根据该标签名创建元素节点对象,并将创建好的对象作为返回值返回
6.document.createTextNode()
他可以创建一个文本节点对象,需要一个文本内容作为参数,将会根据该内容创建文本节点,并将新的结点返回。
7.父节点.appendChild(子节点)
向父节点中添加一个新的子节点
8.inserBefore()
在指定的子节点插入新的子节点
父节点.inserBefore(新节点,旧节点);
9.replaceChild()
可以使用指定的子节点替换已有的子节点
父节点.replaceChild(新节点.旧节点)
10.removeChild()删除一个节点
语法:父节点.removeChild(子节点)
子节点.pareneNode.removeChild(子节点)
