一、DOM
- DOM:Document Object Model 文档对象模型
2.浏览器已经为我们提供了文档节点,对象这个是window属性,可以在页面中直接使用,文档节点代表的是整个网页。
console.log(document)
//[object HTMLDocument]
3.获取button对象
<button id="btn">按钮</button>
var btn=document.getElementById("btn");
4.修改按钮的文字
//获取按钮里面的文字
console.log(btn.innerHTML);
//修改文字
btn.innerHTML="I'm a button";
二、事件
1.事件:就是用户和浏览器之间的交互行为,比如:点击按钮、鼠标移动、关闭窗口。
2.我们可以在事件对应的属性中设置一些js代码,这样当事件被触发时,这些代码将会被执行。
3.可以将js代码编写到标签的onclick属性中,只有当我们点击按钮时,js代码才会执行吗,虽然可以写在标签的属性中,但是他们属于结构与行为耦合,不方便维护,不推荐使用。
<button onclick="alert('你点我干嘛!!!');">点我一下</button>
4.将对象绑定一个事件,这种方法维护起来更好
//获取按钮对象
var btn=document.getElementById("btn");
//可以为按钮绑定的事件绑定处理函数的形式来响应事件
//这样当事件被触发时,其对应的函数将会被调研员
//绑定一个事件
btn.onclick=function(){
alert("你还点我干嘛");
}
5.onclick像这种单击事件绑定的函数,我们称为单击响应函数,当事件被触发的时候就执行。
三、文档的加载
1.浏览器加载一个页面时,是按照自上向下的顺序加载的,读取一行加载一行。
如果将script标签写到页面上边,在代码执行时,页面还没有加载,页面还没有加载DOM对象,会导致无法获取到DOM对象。
2.将js代码编写到下部,可以确保页面加载完成后再加载js代码。
3.onload事件会在整个页面加载完成之后才触发,为window绑定一个onload事件
window.onload=function(){
alert("hello");
}
4.如果想把script写到上部,就可以写到onload事件里,
该事件对应的响应函数将会在页面加载完成之后执行,
这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了。
window.onload=function(){
var btn=document.getElementById("btn");
btn.onclick=function(){
alert("你还点我干嘛");
}
}
四、DOM查询,获取元素节点
1.getElementsByTagName()
(1)可以根据标签名来获取一组元素节点对象
(2)这个方法会给我们返回一个类数组对象,所有查询到的元素都会封装到对象中。
即使只查询到一个元素,也会返回一个数组。
(3)因为是类数组,可以查询其长度,还可以进行遍历。
2.innerHTML
(1)innerHTML用于获取元素内部的HTML代码
(2)对于自结束标签,这个属性无意义,比如input标签
(3)如果需要读取元素节点属性,直接使用 元素.属性名。比如:元素.id 、元素.name
注意:class属性不能采用这种方式,读取class属性时需要使用元素 .className
3.innerText
(1)该属性可以获取到元素内部的文本内容。
(2)它和innerHtml类似,不同的是它会自动将html标签去除
4.获取节点中的文本节点
五、通过元素节点的子节点查询
1.childNodes属性
(1)childNodes属性会获取包括文本节点在内的所有节点。
根据DOM,标签与标签之间的空白也会被默认为文本节点。
注意:在IE8及以下版本,不会讲空白文本当成子节点,所以该属性在IE8中会返回出现的子元素个数,而其他浏览器会包括空白文本。
(2)children属性
可以获取当前元素的所有子元素。不包括空白文本。
(3)firstChild属性
firstChild可以获取到当前元素的第一个子节点(包括空白文本节点)
(4)firstElementChild属性
firstElementChild属性可以获取当前元素的第一个子元素(不包括空白文本节点)
注意:这个属性不兼容IE8及以下的浏览器。
六、获取父节点和兄弟节点
(1)定义一个函数,专门用来为指定的元素绑定单击响应函数。
参数:idStr 要绑定单击响应函数的对象的id属性值。
fun 事件的回调函数,当单击元素时,该函数将会被触发。
function myClick(idStr,fun){
var btn=document.getElementById(idStr);
btn.onclick=fun;
}
myClick("btn01",function(){
alert ("hello");
})
(2)parentNode属性
返回当前节点的父节点。返回不是数组,只有一个。
(3)previousSibling属性
返回当前节点的前一个兄弟节点,也可能获取到空白的文本。
(3)previousElementSibling属性
返回当前节点的前一个兄弟元素,不包括空白文本。IE8及以下不支持。
七、DOM查询的其他方法
1.获取body标签
var body=document.getElementsByTagName("name")[0];
//getElementsByTagName方法返回的是类数组,而一个文档里面是只有一个body标签的
在doucument中有一个属性body,它保存的是body的引用。
var body=document.body;
2.获取Html根标签
document.documentElement保存的是html的根标签。
var html=document.documentElement;
3.document.all页面所有的元素
document.all可以获取页面中所有的元素
document.getElementByTagName("*")也可以获取页面中所有的元素。
4.根据元素的class属性值查询一组元素节点对象
getElementsByClassName()可以根据class属性获取一组元素节点对象,但是该方法不支持IE8及以下浏览器。
document.getElementsByClassName("class值");
可以用document.querySelector():
document.querySelector(".box1");
5.获取class为box1中的所有的div
document.querySelector();
(1)需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一个元素节点对象。IE8支持这个方法
document.querySelector(".box1 div");
(2)使用该方法总会返回唯一的一个元素,如果满足条件的元素有多个,那么它只会返回第一个。
6.document.querySelectorAll()
document.querySelectorAll()和document.querySelector()用法类似,不同的是它会将符合条件的内容封装到一个数组中返回。
即使符合条件的元素只有一个,也会返回数组。