JS中的DOM对象
标签是静的，js作用实现交互
一、定义
文档对象模型
文档：整个HTML网页
对象：网页中的每一个部分都转化成了对象
模型：用它来表示对象之间的关系，方便我们获取对象（节点）
image.png
二、节点
Node，构成HTML文档最基本的单元
- 文档节点：整个html文档
- 元素节点：HTML文档中的HTML标签
- 属性节点：元素的属性
- 文本节点：html标签中的文本内容
也就是说，浏览器成为我们提供文档节点，对象是window属性，可以在页面中直接使用，文档节点代表的是整个网页
三、DOM查询
①获取元素节点：
通过document对象调用，
1、getElementByld()-----通过id属性获取一个元素节点对象
2、getElementsByTagName()-----通过标签名获取一组节点对象
3、getElementsByName()-----通过name属性获取一组元素节点对象
（元素可看成标签）
HTML:
<div class="inner">
<ui id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ui>
</div>
<div class="inner">
gender:
<input type="radio" name="gender" value="male"/>
Male
<input type="radio" name="gender" value="female"/>
Female
</div>
<div>
<div>
<button id="btn01">
查找#bj节点
</button>
</div>
<div>
<button id="btn02">
查找所有li节点
</button>
</div>
<div>
<button id="btn03">
查找name=gender的所有节点
</button>
</div>
</div>
JS:
window.onload = function{
//查找#id为bj的节点
//第一步：为id=btn01的按钮绑定一个单击响应函数，
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
//查找为bj的节点
var bj = document.getElementById("bj");
//打印bj
//innerHTML通过这个属性可以获得元素内部的html代码
alert(bj.innerHTML);
}
//查找所有li节点
//为id为btn02的按钮绑定一个单击响应函数
var btn02 = document.getElementById("btn02");
btn01.onclick = function(){
//查找所有li节点
//getElementByTagName()可以根据标签名来获取一组元素节点对象
//给我们返回一个类数组对象(有十个li就返回多少个)，所有查询到的元素都会封装到对象中，即
//使查到的元素就只有一个也会封装到数组中返回
var lis = document.getElementByTagName("li");
//打印lis
//alert(lis.length)
//变量lis
for(var i=0 ; i<lis.length ; i++){
alert(lis[i].innerHTML)
}
}
var btn03 = document.getElementById("btn03");
btn03.onclick = function(){
//查找name=gender的所有节点
var inputs = document.getElementByName("gender")
for(var i=0 ; i<inputs.length ; i++){
alert(inputs[i].name);
//如果只有inputs[i],那么就打印不出他的内容，而innerHTML用于获取元素内部的HTML代码，对于input这样的自结束标签没 //有意义，所以不可以用
//属性要读取，则直接使用元素.属性名读取。
//例子：元素.id 元素.name 元素.value
//如果要读class，因为他是JS中的保留字，需要使用 元素.className
}
}
四、DOM增删改（HTML内容不变）
- 创建：
//创建“广州”节点，添加到#city下
myClick("btn01",function){
//创建广州节点<li></li>
/*
document.createElement(),可以根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回
*/
var li = document.createElement("li");
//创建文本节点(li为父节点)
/*
document.createTextNode()，创建一个文本节点对象，需要一个文本内容作为参数，将会根据该内容创建的文本节点，并将新的节 点返回
*/
var gzText = document.createTextNode("广州");
//将gzText设置为li的子节点
/*
appendChild()，向父节点中添加子节点
即： 父节点.appendChild(子节点)；
*/
li.appendChild(gzText);
//(不会显示出来，只会在内存中)
//获取id为city的节点
var city = document.getElementById("city");
//将广州添加到city下
city.appendChild(li);
}
- 插入：
//将广州插入到#bj前面
myClick("btn02",function()){
//创建一个广州
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取city
var city = document.getElementById("city");
/*
insertBefore(),可以在指定的节点前插入新的子节点
即： 父节点.insertBefore(新节点,旧节点);
*/
city.insertBefore(li,bj);
}
- 替换：
//将广州节点替换#bj节点
//前面都不变，将最后一行代码换成
city.replaceChild()
/*
replaceChild(),可以使用指定的子节点替换已有的子节点，
即: 父节点.replaceChild(li,bj);
*/
- 删除：
//删除#bj节点
myClick("btn02",function()){
var bj = document.getElementById("bj");
var city = document.getElementById("city");
city.removeChild();
}
/*
删除一个子节点，
即：父节点.removeChild(子节点)
*/
但还可以直接获取父元素后再把自己这子节点删除，
bj.parentNode.removeChild(bj);//子节点.parentNode.removeChild(子节点)
