DOM
1.DOM简介
节点
文档节点:整个HTML文档
元素节点:HTML文档中的HTML标签
属性节点:元素的属性
文本节点:HTML标签中的文本内容
节点的属性
nodeName nodeType nodeValue
文档节点 #document 9 null
元素节点 标签名 1 null
属性节点 属性名 2 属性值
文本节点 #text 3 文本内容
浏览器已经为我们提供 文档节点对象,这个对象是window属性
可以在页面中直接使用,文档节点代表的是整个网页
//获取到button对象
var btn = document.getElementById("btn");
//修改按钮的文字
btn.innerHTML = "I'm button";
2.事件
事件:就是用户和浏览器之间的交互行为
比如:点击按钮,鼠标移动,关闭窗口...
可以为按钮的对应事件绑定处理函数的形式来响应事件
这样当事件触发时,其对应的函数将会被调用
var btn = document.getElementById("btn");
//绑定一个单击事件
//为单击事件绑定的函数,我们称为单击响应函数
btn.onclick = function() {
alert("点击");
}
3.文档的加载
浏览器在加载一个页面时,是按照自上向下的顺序加载的
读取到一行就运行到一行,如果将script标签写到页面的上边
在代码执行时,页面还没有加载,DOM对象也没有加载,会导致无法获取到DOM对象
将JS代码编写到页面的下部就是为了可以在页面加载完毕以后再执行js代码
onload事件会在整个页面加载完成之后才触发
为window绑定一个onload事件,该事件对应的响应函数会在页面加载完成之后执行
这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
window.onload = function(){
}
4.DOM查询
通过document对象调用
getElementById()通过id属性获取一个元素节点对象
getElementsByTagName()通过标签名获取一组元素节点对象
getElementsByName()通过name属性获取一组元素节点对象
获取元素节点的子节点
getElementsByTagName()方法:返回当前节点的指定标签名后代节点
childNodes属性:表示当前节点的所有子节点
firstChild属性:表示当前节点的第一个子节点
lastChild属性:表示当前节点的最后一个子节点
获取父节点和兄弟节点
parentNode属性:表示当前节点的父节点
previousSibling属性:表示当前节点的前一个兄弟节点
nextSibling属性:表示当前节点的后一个兄弟节点
innerHTML用于获取元素内部的HTML代码,对于自结束标签,这个属性没有意义
如果需要获取元素节点的属性
直接使用 元素.属性名
注意:class属性不能采用这种方式
读取class属性是需要采用 元素.className
定义一个函数,专门用来为指定元素绑定单击响应元素
参数:
idstr 要绑定单击响应函数的对象的id属性值
fun 事件的回调函数,当单击元素时,该函数将会被执行
function myclick(idStr , fun) {
var btn = document.getElementById("idStr");
btn.onclick = fun;
};
在事件的响应函数中,响应函数是给谁绑定的,this就是谁
5.DOM查询的其他方法
//获取body标签
//var body = document.getElementsByTagName(“body”)[0];
在document中有一个属性body,它保存的是body的引用
document.documentElement;保存的是html根标签
document.all代表页面中所有的元素
根据元素的class属性值查询一组元素节点对象
document.getelementsByClassName() 但是该方法不支持IE8以下的浏览器
document.querySelector()
需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一个元素节点对象
IE8中也可以使用
使用该方法总会返回唯一的一个元素,如果满足条件的元素有多个,它只会返回第一个
document.querySelectorAll()
该方法和document.querySelector()用法类似
不同的是它会将符合条件的元素封装到数组中返回
即使符合条件的元素只有一个,也会返回数组
6.DOM增删改
方法
appendChild() 把新的子节点添加到指定节点
removeChild() 删除子节点
用法:子节点.parentNode.removeChild(子节点)
replaceChild() 替换子节点
用法:父节点.replaceChild(新节点,旧节点)
insertBefore() 在指定的子节点前面插入新的子节点
用法:父节点.insertBefore(新节点,旧节点)
createElement() 创建元素节点
createTextNode() 创建文本节点
使用innerHTML也可以完成DOM的增删改的相关操作
一般会两种方式结合使用
city.innerHTML += "<li>广州<li>";
点击超链接以后,超链接会跳转页面,这是超链接的默认行为
可以通过在响应函数的最后return fales来取消默认行为
confirm()用于弹出一个带有确认和取消按钮的提示框
需要一个字符串作为参数
如果用户点击确认则返回true,如果点击取消则返回false