DOM,文档对象模型
DOM全称:Document Object Model文档对象模型。JS通过DOM来对HTML文档进行操作。
- 文档:表示的是整个html网页文档
- 对象:表示将网页中的每一个部分都转换为一个对象
- 模型:使用模型来表示对象之间的关系,方便获取对象
DOM常进行的操作
- 获取元素节点
- 对元素进行操作
- 动态创建元素
- 事件
获取元素
节点
构成HTML文档最基本的单元
常用节点分四类
- 文档节点:整个html文档
- 元素节点:html文档中html标签
- 属性节点:元素的属性
- 文本节点:html标签中的文本内容
节点属性 | nodeName | nodeType | nodeValue |
---|---|---|---|
文档节点 | #document | 9 | null |
元素节点 | 标签名 | 1 | null |
属性节点 | 属性名 | 2 | 属性值 |
文本节点 | #text | 3 | 文本内容 |
获取元素节点
- 通过
document
对象调用
- getElementById():通过
id
属性获取一个
元素节点对象var myElement = document.getElementById("intro");
- getEleMentsByTagName():通过
标签名
获取一组
元素节点对象var x = document.getElementById("main"); var y = x.getElementsByTagName("p");
- getElementsByName():通过
name
属性获取一组
元素节点对象var x = document.getElementsByName("intro");
- getElementsByClassName():通过
类名
获取相同类名
元素节点对象var x = document.getElementsByClassName("intro");
- querySelectorAll():通过
选择器
获取元素节点内容var x = document.querySelectorAll("p.intro");
- 如果需要读取元素节点属性,直接使用元素.属性名,如元素.id,元素.name,元素.value,注意
class
属性需要元素.className
获取元素节点的子节点
- 通过具体的元素节点调用
- getElementByTagName():方法,返回当前节点的指定标签名后代节点
- child Nodes:属性,表示当前节点的所有子节点
- first Child:属性,表示当前节点的第一个子节点
- lastChild:属性,表示当前节点的最后一个子节点
对元素进行操作
操作元素属性
- 对象.src = ‘目标地址’
- 对象.href = ‘目标链接’
- 对象.alt = ‘目标替换文本’
- 对象.title = ‘目标图片提示信息’
操作表单属性
- 对象.type = ‘更换表单类型’;
- 对象.value = ‘更换表单的内容’
- 对象.disabled = ‘true’
操作样式属性
普通修改
<div id="box">123456798</div>
// 点击目标盒子,显示一个红色背景
var box = document.querySelector('#box');
box.onclick = function() {
this.style.backgroundColor = 'red';
}
利用className= '值'
属性
// 设置红色背景的样式
.red {
background-color: red;
}
// 通过给目标盒子添加red的样式类,来改变他的背景
var box = document.querySelector('#box');
box.onclick = function() {
this.className = 'red';
}
动态创建元素
document.write();
比较随意,想创建就创建,可以直接在write
里写属性就行,但由于容易覆盖原页面,所以不推荐使用;
<script>
// window.onload表示当页面全部加载完毕后再执行{}内的代码
window.οnlοad=function(){
document.write("<div>123</div>");
}
</script>
inner HTML = ();
<div></div>
<script>
// 采取拼接字符串的方式创建元素 效率很低
var divs = document.querySelector("div");
for(var i=0; i<=500; i++){
divs.innerHTML += "<a href='javascript:;'>123</a>";
}
// 采取数组的方式创建元素 效率更高
var arr = [];
for(avr i=0; i<=500; i++){
// 向数组中添加a
arr.push("<a href='javascript:;'>123</a>");
}
// join把数组转换为字符串形式
dis.innerHTML = arr.join[""];
</script>
document.createElement();
<div></div>
<script>
var divs = document.querySelector("div");
for(var i=0; i<=500; i++){
var as = document.createElement("a");
divs.appendChild(as);
}
</script>
innerHTM和document.createElement()如果是创建单个元素是没有区别的。如果创建的元素数量很多, 使用innerHTML拼接字符串的方式和document.createElement()相比,效率会低很多。但如果使用innerHTML数组的形式和document.createElement()相比,效率就会提高很多,比document.createElement()效率还要高。
事件
文档或浏览器窗口中发生的一些特定的交互瞬间,即用户和浏览器的交互行为
- JavaScript与HTML之间的交互是通过事件实现的
- 对于Web应用来说,有
点击某个元素
、将鼠标移动到某个元素上方
,按下键盘上某个键
等这些代表性事件
事件监听程序
- 绑定HTML元素属性
<input type = "button" id = "btn" value = "1" onclick = "alert('?')" >
- 绑定DOM对象属性
<body>
<input type="button" id="btn" value="点我有惊喜" />
<script>
// 获取元素
var btn = document.getElementById("btn");
// 添加绑定事件
btn.onclick = function () {
// 定义的是事件被触发后要做的事
alert("惊喜");
};
</script>
</body>
分配事件
事件 | 触发方式 |
---|---|
onclick | 鼠标单击 |
onload | 进入页面 |
onunload | 离开页面 |
onchange | 离开字段 |
onmouseover | 鼠标移动到元素上 |
onmouseout | 鼠标移动到元素边界 |
onmousedown | 鼠标按键按下 |
onmouseup | 鼠标按键放开 |