(https://www.w3school.com.cn/js/js_htmldom.asp)
DOM简介(P91)
DOM全称：Document Object Model文档对象模型
JS中通过DOM来对HTML文档进行操作，只要理解了DOM就可以随心所欲的操作WEB页面
- 文档
整个HTML网页文档 - 对象
将网页中的每一个部分都转换为一个对象 - 模型
实用模型来表示对象之间的关系，方便获取对象
节点
节点Node，是构成我们网页的最基本组成部分，网页中的每一部分都可以成为是一个节点
文档节点：整个HTML文档
元素节点： HTML文档中的HTML标签
属性节点： 元素的属性
文本节点： HTML标签中的文本内容
浏览器已经为我们提供了文档节点，这个对象是window属性
可以在页面中直接使用，文档节点代表的是整个网页
<button id = "btn">按钮</button>
<script type = "text/javascript">
//获取到按钮对象
var btn = document.getElementById("btn");
//修改按钮的文字
btn.innerHTML = "I`m Button";
</script>
- innerHTML
返回节点的内容包括html标签 - innerText
返回节点的内容，去除html标签
事件
(https://www.w3school.com.cn/jsref/dom_obj_event.asp)
事件就是文档或浏览器窗口中发生的一些特定的交互瞬间
js和HTML之间的交互是通过事件实现的
比如点击按钮。鼠标移动，关闭窗口
可以在事件对应的属性中设置一些js代码，当事件被触发时，这些代码将会执行
<button id = "btn" onclick="alert("hello world!");">按钮</button>
这种写法我们称为结构和行为耦合，不方便维护，不推荐使用
（推荐使用）在js中写，可以为按钮的对应事件绑定处理函数的形式来响应事件
<button id = "btn" onclick="alert("hello world!");">按钮</button>
<script type = "text/javascript">
//获取到按钮对象
var btn document.getElementById("btn");
//为按钮绑定一个单击事件
//当事件处触发时，其对应的函数将会被调用
btn.onclick = function(){
alert("hello world!");
};
</script>
文档的加载
浏览器在加载一个页面的时候，是按照至上向下的顺序加载的
读取到一行就运行一行
如果将script标签写到页面的上边
在执行代码时，页面还没有加载
使用onload让页面加载完成之后再执行
<script type = "text/javascript">
window.onload = function(){
//获取到按钮对象
var btn document.getElementById("btn");
//为按钮绑定一个单击事件
//当事件处触发时，其对应的函数将会被调用
btn.onclick = function(){
alert("hello world!");
};
}
</script>
可用于打开页面后的自动加载，也可让代码不受HTML的顺序限制
DOM的查询
(https://www.w3school.com.cn/jsref/dom_obj_document.asp)
获取元素节点
通过document对象调用
getElementById()
通过id属性获取一个元素节点对象
getElementsByTagName()
通过标签名获取一组元素节点对象
var lis = document.getElementsByTagName("li");
这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
getElementsByName()
通过name属性获取一组元素节点对象
<input type="radio" name="gender" value="male"/>
<script>
var inputs = documnet.getElementsByName("gender");
alert(inputs.length);
/*
*innerHTML用于获取元素内部的HTML代码的内容，对于自结束标签，这个属性没有意义
*/
</script>
获取元素节点的子节点
通过具体的元素节点调用
getElementsByTagName()
方法，返回当前节点的指定标签名后代节点
childNodes
属性，表示当前节点的所有子节点
会获取包括文本节点在内的所有节点
根据DOM标签间空白也会当成文本节点
children
children属性可以获取当前元素的所有子元素，不包括空白部分
firstChild
属性，表示当前节点的第一个子节点（包括空白文本节点）
firstElementChild
获取当前元素的第一个子元素
lastChild
属性，表示当前节点的最后一个子节点
<ul id = "city">
<li id="bj">beijing</li>
<li >shanghai</li>
<li >tokyo</li>
<li >shouer</li>
</ul>
<script>
var btn04 = document.getElementById("btn04");
btn04.onclick = function(){
//获取id为city的元素
var city = document.getElementById("city");
//查找#city下所有li节点
city.getElementsByTagName("li");
//返回#city的所有子节点
var cns = city.childNodes;
}
</script>
获取父节点和兄弟节点
通过具体的节点调用
parentNode
属性，表示当前节点的父节点
previousSibling
属性，表示当前节点的前一个兄弟节点（也可能获取到空白文本）
previousElementSibling
获取前一个兄弟元素，不包括空白
nextSibling
属性，表示当前节点的后一个兄弟节点（也可能获取到空白文本）
nextElementSibling
获取后一个兄弟元素，不包括空白
节点的属性
//元素节点 nodeName 标签名 nodeType 1 nodeValue null
//属性节点 nodeName 属性名 nodeType 2 nodeValue 属性值
//文本节点 nodeName #text nodeType 3 nodeValue 文本的值
var fc = bj.firstChild;
alert(fc.nodeValue);
DOM查询补充
获取body标签对象
var body = document.body;
获取html根标签
var html = document.documentElement;
获取所有元素
var all = documnet.all;
或者 all = document.getElementsByTagName("*");
for(var i=0;i<all.length;i++){
console.log(all[i]);
}
根据元素的class属性查询一组元素的结点对象
- getElementsByClassName()返回的是数组
var box1 = document.getElementsByClassName("box1");
ie8不支持，一般不用
querySelector和querySelectorAll
- querySelector
需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
<body>
<div class = “box1”>
<div></div>
</div>
</body>
<script>
var div = documnet.querySelector(".box1 div");
</script>
只会找第一个class为box1的，后面的就管不着了
- querySelectorAll
可以找到所有的class为box1的元素，即使符合条件的元素只有一个，他也会返回数组
练习
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var items = document.getElementsByName("items");
//全选按钮，点击按钮后，四个多选框全都被选中
//1，#checkAllBtn
//为id为checkedAllBtn的按钮绑定一个单机响应函数
var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function(){
//设置四个多选框变成选中状态
//遍历items
for(var i=0;i<items.length;i++){
items[i].checked=true;
}
checkedAllBox.checked=true;
}
//全不选
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function(){
for(var i=0;i<items.length;i++){
items[i].checked=false;
}
checkedAllBox.checked=false;
}
//反选
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function(){
checkedAllBox.checked=true;
for(var i=0;i<items.length;i++){
items[i].checked=!items[i].checked;
if(!items[i].checked){
checkedAllBox.checked=false;
}
}
}
//提交，获取名字
var senBtn = document.getElementById("senBtn");
senBtn.onclick = function(){
var str="";
for(var i=0;i<items.length;i++){
if(items[i].checked){
str=str+items[i].value+",";
}
}
alert(str);
}
//checkbox的全选/全不选
var checkedAllBox = document.getElementById("checkedAllBox");
checkedAllBox.onclick = function(){
if(checkedAllBox.checked){
for(var i=0;i<items.length;i++){
items[i].checked=true;
}
}else{
for(var i=0;i<items.length;i++){
items[i].checked=false;
}
}
}
for(var i=0;i<items.length;i++){
items[i].onclick = function(){
checkedAllBox.checked=true;
for(var j=0;j<items.length;j++){
if(!items[j].checked){
checkedAllBox.checked=false;
//一旦进入判断得出结果，就break
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="senBtn" value="提 交" />
</form>
</body>
</html>
图片居中
margin：0 auto；
文本居中
text-align：center