DOM的简介
DOM简介
什么是DOM
- DOM ,全称Document Object Model文档对象模型。
- JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。
- 文档
文档表示的就是整个的HTML网页文档 - 对象
对象表示将网页中的每一个部分都转换为了一个对象。 - 模型
使用模型来表示对象之间的关系,这样方便我们获取对象。
模型
节点
- 节点Node ,是构成我们网页的最基本的组成部分,网页中的每一个部分都可以称为是一个节点。
- 比如: html 标签、属性、文本、注释、整个文档等都是一个节点。
- 虽然都是节点,但是实际上他们的具体类型是不同的。
- 比如:标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。
- 节点的类型不同,属性和方法也都不尽相同。
节点: Node——构成HTML文档最基本的单元。
常用节点分为四类
- 文档节点:整个HTML文档
- 元素节点:HTML文档中的HTML标签
- 属性节点:元素的属性
- 文本节点: HTML标签中的文本内容
nodeName | nodeType | nodeValue | |
---|---|---|---|
文档节点 | #document | 9 | null |
元素节点 | 标签名 | 1 | null |
属性节点 | 属性名 | 2 | 属性值 |
文本节点 | #text | 3 | ★文本內容 |
文档节点(document)
- 文档节点document ,代表的是整个HTML文档,网页中的所有节点都是它的子节点。
- document对象作为window对象的属性存在的,我们不用获取可以直接使用。
- 通过该对象我们可以在整个文档访问内查找节点对象,并可以通过该对象创建各种节点对象。
元素节点(Element)
-
HTML中的各种标签都是元素节点,这也是我们最常用的一个节点。
-
浏览器会将页面中所有的标签都转换为一个元素节点,我们可以通过document的方法来获取元素节点。
-
比如:
document.getElementById()
根据id属性值获取一个元素节点对象。
文本节点(Text)
- 文本节点表示的是HTML标签以外的文本内容,任意非HTML的文本都是文本节点。
- 它包括可以字面解释的纯文本内容。
- 文本节点一般是作为元素节点的子节点存在的。
- 获取文本节点时, 一般先要获取元素节点。在通过元素节点获取文本节点。
- 例如:
元素节点.firstChild;
获取元素节点的第一个子节点,一般为文本节点
属性节点(Attr)
- 属性节点表示的是标签中的一个一个的属性,这里要注意的是属性节点并非是元素节点的子节点,而是元素节点的一部分。
- 可以通过元素节点来获取指定的属性节点。
- 例如:
元素节点.getAttributeNode("属性名"); - 注意:我们一般不使用属性节点。
在文档中获取对象
<body>
<button id="btn">我是一个按钮</button>
<script type="text/javascript">
/*
浏览器已经为我们提供文档节点对象这个对象是window属性
可以在页面中直接使用,文档节点代表的是整个网页
*/
//获取到button对象
var btn = document.getElementById("btn");
//console.1og(btn);
//修改按钮文字
btn.innerHTML = "I'm Button";
</script>
</body>
<!--[object HTMLButtonElement]>
事件的简介
事件,就是用户和浏览器之间的交互行为,
比如: 点击按钮,鼠标移动、关闭窗口······
我们可以在事件对于的属性中设置一些js代码,
这样当事件被触发时,这些代码将会执行
<butotn id="bth" onclick="alert('点击按钮事件触发');">按钮</butotn>
这种写法我们称为结构和行为耦合,不方便维护,不推荐使用
可以为按钮的对,应事件绑定处理函数的形式来响应事件
//获取按钮对象
var btn = document.getElementById( "btn");
//可以为按钮的对应事件绑定处理函数的形式来响应事件
//这样当事件被触发时,其对应的函数将会被调用
//绑定一个单击事件
//像这种为单击事件绑定的函数,我们称为单击响应函数
btn.onclick = function(){
alert ("单机事件");
};
文档的加载
浏览器在加载一个页面时,是按照自上向下的顺序加载的,
读取到一行就运行一行,如果将script标签写到页面的上边,
在代码执行时,页面还没有加载,页面没有加载DOM,对象也没有加载会导致无法获取
<script>
//获取id为btn的按钮
var btn = document.getElementById("btn");
//为按钮绑定一个单击响应函数
btn.onclick = function(){
alert("he11o");
};
</script>
<button id="btn">点我</button>
<!--这样无法正常运行事件-->
也就是说,为了使页面完整的运行,需要先加载完毕页面所有內容,再进行加载事件
onload事件会在整个页面加载完成之后才触发
为window绑定一个onload事件
该事件对应的响应函数将会在页面加载完成之后执行,
这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
window.onload = function(){
//获取id为btn的按钮
var btn = document.getElementById("btn");
//为按钮绑定一个单击响应函数
btn.onclick = function(){
alert("he11o");
};
DOM查询
获取元素节点
- 通过documen对象调用
- getElementById()
通过id属性获取一个元素节点对象 - getElementsBy TagName()
通过标签名获取一组元素节点对象 - getElementsByName()
通过name属性获取一组元素节点对象
<script>
//为id为btn01的按钮绑定一个 单击响应函数
var btn01 = document. getElementById("btn01");
btn01.onclick = function(){
//查找#bj节点
var bj = document.getElementById("bj");
//打印bj
//innerHTML 通过这个属性可以获取到元素内部的html代码
alert(bj.innerHTML);
};
</script>
<body>
<button>
<ul>
<li id = "bj">北京</li>
</ul>
</button>
</body>
//为id为btn03的按钮绑定一个单击响应函数
var btn03 = document.getElementById("btn03");
btn03.onclick = function(){
//查找name=gender的所有节点
var inputs = document.getElementsByName("gender");
//alert( inputs. length);
for(var i=0; i<inputs.length ; i++){
alert(inputs[i]. innerHTML) ;
}
};
innerHTML用于获取元素内部的HTML代码的
对于自结束标签,这个属性没有意义
如果需要读取元素节点属性,
- 直接使用元素.属性名
例子: 元素.id 元素.name 元素. value
注意: class属性不能采用这种方式, - 读取class属性时需要使用元素 .clas sName
获取元素节点的子节点
通过具体的元素节点调用
- getElementsByTagName()
方法,返回当前节点的指定标签名后代节点 - childNodes
属性,表示当前节点的所有子节点 - firstChild
属性,表示当前节点的第一个子节点 - lastChild
属性,表示当前节点的最后一个子节点
childNodes属性会获取包括文本节点在呢的所有节点
根据DOM标签标签间空白也会当成文本节点
注意:在IE8及以下的浏览器中,不会将空白文本当成子节点,
children属性可以获取当前元素的所有子元素
获取父节点和兄弟节点
通过具体的节点调用
- parentNode
属性,表示当前节点的父节点 - previousSibling
属性,表示当前节点的前一个兄弟节点 - nextSibling
属性,表示当前节点的后一个兄弟节点
其它方法
获取body标签
var body = document.getElementsByTagName("body")[0];
在document中有一个属性body,它保存的是 body的引用
var body = docunent.body;
document . documentElement保存的是html根标签
var html = document.documentElement;
document.all代表页面中所有的元素
var all = document.all;
根据元素的class属性值查询一组元素节点对象
getElementsByClassName( )可以根据class属性值获取一组元素节点对象,
但是该方法不支持IE8及以下的浏览器
var box1 = document.getElementsByClassName( "box1");
获取页面中的所有的div
var divs = document.getElementsByTagName("div");
获取class为box1中的所有的div
.box1 div
document.querySelector( )
- 需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一 个元素节点对象
- 虽然IE8中没有getElementsByClassName( )但是可以使用querySelector( )代替
- 使用该方法总会返回唯一的一个元素,如果满足条件的元素有多个,那么它只会返回第一个
var div = document.querySelector(".box1 div");
var box1 = document.querySelector(".box1")
document .querySelectorAll()
该方法和querySelector( )用法类似,不同的是它会将符合条件的元素封装到一个数组中返回
即使符合条件的元素只有一个,它也会返回数组
box1 = document.querySelectorAll(".box1");
box1 = document.querySelectorA11("#box2");
DOM增删改
把新的子节点添加到指定节点
window.onload = function(){
//创建一 个"广州"节点,添加到#city下
myClick("btn01" , function(){
/*创建广 州节点<li>广州</li>
创建1i元素节点
*/
//document.createElement( )
//可以用于创建一个元素节点对象,
//它需要一个标签名作为参数,将会根据该标签名创建元素节点对象,
//并将创建好的对象作为返回值返回
var 1i = document.createElement("li");
//创建广州文本节点
//document.createTextNode( )
//可以用来创建一个文本节点对象
//需要一个文本内容作为参数,将会根据该内容创建文本节点,并将新的节点返回
var text = document.createTextNode("广州");
//将gzText设置li的子节点
/*
appendChild()
向一个父节点中添加一个新的子节点
用法:父节点.appendChild(子节点);
*/
li.appendChild(gzText);
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取id为city的节点
var city = document.getElementById("city");
//将广州添加到city下
city.appendChild(li);
}
总结:先给按钮绑定单击函数,找到父节点,在下面创建元素节点,再在里面创建文本节点,然后通过appendChild向父节点中添加子节点。
在指定节点前添加新节点
window.onload = function(){
myClick("btn01" , function(){
var 1i = document.createElement("li");
var text = document.createTextNode("广州");
li.appendChild(gzText);
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取id为city的节点
var city = document.getElementById("city");
//将广州添加到city下
city.insertBefore(li,bj);
}
insertBefore()
- 可以在指定的子节点前插入新的子节点
语法:父节点 .insertBefore(新节点,旧节点);
替换子节点
window.onload = function(){
myClick("btn01" , function(){
var 1i = document.createElement("li");
var text = document.createTextNode("广州");
li.appendChild(gzText);
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取id为city的节点
var city = document.getElementById("city");
//将广州添加到city下
city.replaceChild(li,bj);
}
replaceChild()
- 可以使用指定的子节点替换已有的子节点
语法: 父节点 .replaceChild (新节点,旧节点) ;
删除节点
myClick( "btn04" , function(){
//获取id为bj的节点
var bj = document. getElementById("bj");
//获取city
var city = document. getElementById("city");
city.removeChild(bj);
//bj.parentNode. removeChild(bj);
});
removeChild( )
- 可以删除一个子节点
语法: 父节点 .removeChild(子节点) ;
通过innerHTML完成增删改的相关操作
myClick("btn07" , function( ){
//向city中添加广州
var city = document. getElementById("city");
//city.innerHTML += "<li>广州</li>";
//创建一个li
var li = document . createElement("li" );
//向1i中设置文本
li.innerHTML =“广州";
//将1i添加到city中
city.appendChild(li);
});