文章目录
1.DOM简介
1.1什么是DOM
1.2模型
1.3节点
1.4节点的属性
1.5 实例
<body>
<button id="btn">first button</button>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.innerHTML = "second button";
</script>
</body>
2.事件
2.1事件的引入
事件就是用户和浏览器的交互行为,比如点击按钮,拖动窗口等等。
<body>
<button id="btn" onclick="alert('Hello JavaScript')">first button</button>
</body>
当然,上面的例子耦合度多高,所以我们一般使用下面的方法。首先获取一个按钮对象,然后为按钮对象的对应事件绑定一个函数。
<body>
<button id="btn">first button</button>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("Hello JavaScript");
}
</script>
</body>
2.2文档的加载
我们的Js代码一般不会放置到<body></body>
标签当中,加入我们将我们的Js代码放置到<head></head>
中,它会先于我们的<body></body>
先加载,会出现错误。比如下面是一个错误代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("Hello JavaScript");
}
</script>
</head>
<body>
<button id="btn">first button</button>
</body>
</html>
所以我么需要借助一个onload事件,该事件会在整个页面都加载完成之后才会执行。我们将该事件绑定在window对象上。这样可以确保在加载Js代码时,整个dom对象已经加载完毕。
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("Hello JavaScript");
}
}
</script>
2.3获取元素节点
2.4图片切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo2</title>
<style type="text/css">
#outer {
width: 300px;
margin: 50px auto;
padding: 10px;
background-color: green;
}
div img {
width: 300px;
height: 200px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var prev = document.getElementById("pre");
var nextv = document.getElementById("next");
var index = 0;
var img = document.getElementsByTagName("img")[0];
var imgArr = ["image/img32.jpg", "image/img33.jpg", "image/img34.jpg", "image/img35.jpg"];
prev.onclick = function(){
if(index === 0) {
index = imgArr.length - 1;
} else {
index--;
}
img.src = imgArr[index];
}
nextv.onclick = function(){
if(index === imgArr.length - 1) {
index = 0;
} else {
index++;
}
img.src = imgArr[index];
}
}
</script>
</head>
<body>
<div id="outer">
<img src="image/img32.jpg" alt="图片无法显示"/>
<button id="pre">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
2.5获取元素节点的子节点
(1)getElementsByTagName()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo3</title>
<script type="text/javascript">
window.onload = function(){
var button = document.getElementById("myButton");
button.onclick = function(){
var father = document.getElementsByTagName("ul")[0];
var son = father.getElementsByTagName("li");
console.log(son.length);
}
}
</script>
</head>
<body>
<div class="container">
<ul>
<li>北京</li>
<li>上海</li>
<li>深圳</li>
<li>广州</li>
</ul>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
</ol>
<button id="myButton">点击我</button>
</div>
</body>
</html>
(2)childNodes / children
<body></body>
中的内容与上面的例子相同。
<script type="text/javascript">
window.onload = function(){
var button = document.getElementById("myButton");
button.onclick = function(){
var father = document.getElementsByTagName("ul")[0];
var son = father.childNodes;
console.log(son.length);
}
}
</script>
为什么是9呢,应为childNodes属性会获取包括文本节点在内的所有节点,包括DOM标签中的空白也会当成文本节点。
children则会获取当前元素的所有子节点,不会获取空白。
(3)firstChild / lastChild
firstChild 会获取当前元素的第一个子节点,包括空白(如果有的话)。
lastChild 会获取当前元素的最后一个子节点,包括空白(如果有的话)。
2.6获取父节点和兄弟节点
2.7 全选练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script type="text/javascript">
window.onload = function(){
var selectAll = document.getElementById("selectAll");
var hobby = document.getElementsByName("hobby");
selectAll.onclick = function(){
for(var i = 0; i < hobby.length; i++) {
hobby[i].checked = true;
}
}
noSelectAll.onclick = function(){
for(var i = 0; i < hobby.length; i++) {
hobby[i].checked = false;
}
}
revSelect.onclick = function() {
for(var i = 0; i < hobby.length; i++) {
hobby[i].checked = !hobby[i].checked;
}
}
}
</script>
</head>
<body>
<form action="#">
<label>
你的爱好是?<br/>
<input type="checkbox" name="hobby"/>篮球
<input type="checkbox" name="hobby"/>足球
<input type="checkbox" name="hobby"/>兵乓球
<input type="checkbox" name="hobby"/>羽毛球
<input type="checkbox" name="hobby"/>排球
<br/>
<input type="button" id="selectAll" value="全选"/>全选
<input type="button" id="noSelectAll" value="全不选"/>全不选
<input type="button" id="revSelect" value="反选"/>反选
<input type="submit" value="提交"/>提交
</label>
</form>
</body>
</html>
作者:Beyong
出处:Beyong博客
github地址:https://github.com/beyong2019
本博客中未标明转载的文章归作者Beyong有,欢迎转载,但未经作者同意必须保留此段声明,且在文章明显位置给出原文连接,否则保留追究法律责任的权利。