JavaScript 之DOM一
文章目录
DOM?
一、事件
1.事件的行内写法
2.事件绑定处理函数的写法
二、文档的加载
1.文档加载的顺序
2.onload事件改变加载顺序
三、DOM查询
轮播图实验
全选练习
添加删除员工练习
DOM?
DOM全称为Document Object Model , 即JS当中的宿主对象 .
一个网页就是一个文档对象 , 一个每个标签都可以看作一个对象
结点 : 构成网页的最基本部分, 网页的每部分都是一个结点
文档结点: 整个网页,document对象
元素结点: HTML标签
属性结点: 元素的属性
文本结点: 标签中的文本内容 <>文本节点</>
提示:以下是本篇文章正文内容,下面案例可供参考
一、事件
JS与HTML通过事件实现交互
1.事件的行内写法
这是一个按钮
缺点 : 不利于维护
2.事件绑定处理函数的写法
这是一个按钮
维护更加方便
二、文档的加载
1.文档加载的顺序
在HTML文件中,通常都是从上往下逐行加载的,也就是说会先加载head标签中的内容,再加载body中的内容
代码如下(示例):
var btn = document.getElementById("btn");
btn.onclick = function(){
alert('dian');
};
<button id="btn" value="按钮">这是一个按钮</button>
这种写法会报空指针异常,因为btn还没加载出来
2.onload事件改变加载顺序
onload事件会在整个页面加载完以后再触发 , 但是会影响性能
注意需要将onload事件绑定给window对象
代码如下(示例):
window.onload = function() {
//获取id为btn的按钮
var btn = document.getElementById("btn");
//为按钮绑定一个单击响应函数
btn.onclick = function() {
alert("hello");
};
};
<button id="btn" value="按钮">这是一个按钮</button>
这样写就不能有空指针异常了
三、DOM查询
1.document对象的几个查询方法 :
1.document.getElementById(); 根据id获取元素对象
2.document.getElementsByTagName(); 根据标签名获取一组元素对象
3.document.getElementsByName(); 根据input框的name属性获取元素对象[radio]
4.document.querySelector(".info"); 根据标签属性查询,返回一个值
5.document.querySelectorAll(".info"); 根据标签属性查询,返回一个数组
2.查询实验 :
window.onload = function(){
var btn01 = document.getElementById("bj");
var btn02 = document.getElementsByName("gender");
var btn03 = document.getElementsByTagName("li");
alert(btn01.innerHTML); //提示出 "北京"
for(var i = 0 ; i <btn02.length ; i++){
alert(btn02[i].className);
alert(btn02[i].name);
}
for(var j = 0; j < btn03.length ; j++){
alert(btn03[i].innerHTML);
}
};
注 : document.getElementsByName(param); 方法,如果要获取class,需要使用className取值 , 其它的属性与html标签中的属性名保持一致
querySelector()与querySelectorAll()实验 :
<script type="text/javascript">
window.onload = function(){
var div = document.querySelector(".info");
console.log(div.innerHTML);
var divList = document.querySelectorAll(".info");
for(var i = 0 ; i < divList.length ; i++){
console.log(divList[i].innerHTML );
}
};
</script>
HTML👇
<body>
<div class="info">1</div>
<div class="info">2</div>
<div class="info">3</div>
</body>
结果 :
轮播图实验
先给代码
<div id="outer">
<span id="info"></span>
<img src="img/1.jpg" />
<button id="pre" value="上一页"></button>
<button id="next" value="下一页"></button>
</div>
</body>
- {
margin: 0;
padding: 0;
}
#outer {
width: 500px;
margin: 50px auto;
padding: 10px;
background-color: greenyellow;
/设置文本居中/
text-align: center;
}
button{
height: 30px;
width: 60px;
}
/**
- 思路 :
- 1.获取页面各元素
- 2.写切换算法
- */
window.onload = function(){
var pre = document.getElementById(“pre”);
var next = document.getElementById(“next”);
var img = document.getElementsByTagName(“img”)[0];
var info = document.getElementById(“info”);
var index = 0; //索引
var imgArrs = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
info.innerHTML = "一共"+imgArrs.length+"张,当前为"+(index+1)+"zhang"; //提示文本
//轮播算法
pre.onclick = function(){
index--;
//判断
if(index < 0){
index = 0;
}
img.src = imgArrs[index];
info.innerHTML = "一共"+imgArrs.length+"张,当前为"+(index+1)+"张";
};
next.onclick = function(){
index++;
if(index > imgArrs.length-1){
index = imgArrs.length-1;
}
img.src = imgArrs[index];
info.innerHTML = "一共"+imgArrs.length+"张,当前为"+(index+1)+"zjhang";
};
};
全选练习
<script type="text/javascript">
window.onload = function(){
var checkedAllBox = document.getElementById("checkedAllBox"); //获取全选按钮
var checkedNoBtn = document.getElementById("checkedNoBtn");
var checkedRevBtn = document.getElementById("checkedRevBtn");
var checkedAllBox = document.getElementById("checkedAllBox");
var sendBtn = document.getElementById("sendBtn");
var items = document.getElementsByName("items");
//全选
checkedAllBtn.onclick = function(){
for(var i = 0 ; i<items.length ; i++){
items[i].checked = true;
}
checkedAllBox.checked = true;
};
//全不选
checkedNoBtn.onclick = function(){
for(var i = 0 ; i<items.length ; i++){
items[i].checked = false;
}
checkedAllBox.checked = false;
};
//反选
checkedRevBtn.onclick = function(){
for(var i = 0 ; i<items.length ; i++){
items[i].checked = !items[i].checked;
}
};
//提交
sendBtn.onclick = function(){
for(var i = 0 ; i<items.length ; i++){
if(items[i].checked){
alert(items[i].value);
}
}
};
//全选/全不选
checkedAllBox.onclick = function(){
for(var i = 0 ; i<items.length ; i++){
items[i].checked = this.checked;
}
};
//四个都选中了,checkedAllBox也应该选中
//四个都没选中,checkedAllBox也不能选中
for(var i = 0 ; i<items.length ; i++){
//为4个单选框都绑定响应函数 , 点击一个就全选
items[i].onclick = function(){
for(var j = 0 ; j<items.length ; j++){
if(items[j].checked == false){
//存在一个未被选中的
checkedAllBox.checked = false;
break;
}
}
};
}
};
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是?<input type="checkbox" id="checkedAllBox" />全选/全不选
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全 选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反 选" />
<input type="button" id="sendBtn" value="提 交" />
</form>
</body>
注意:for循环会在响应函数加载之前先被加载
添加删除员工练习