JS DOM的获取
DOM
DOM，全称Document Object Model文档对象模型。
JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。
文档
-文档表示的就是整个的HTML网页文档
对象
-对象表示将网页中的每一个部分都转换为了一个对象。
模型
-使用模型来表示对象之间的关系，这样方便我们获取对象。
节点：Node——构成HTML文档最基本的单元。
常用节点分为四类
-文档节点：整个HTML文档
-元素节点：HTML文档中的HTML标签
-属性节点：元素的属性
-文本节点：HTML标签中的文本内容
通过JS修改元素的样式：
语法：元素.style.样式名=样式值
通过JS读取元素的样式：
语法：元素.style.样式名
通过style属性设置和读取的都是内联样式
无法读取样式表中的样式
注意：
如果CSS的样式名中含有 - ，
这种名称在JS中是不合法的比如background-color需要将这种样式名修改为驼峰命名法，
去掉 - ，然后将 - 后的第一个字母大写，backgroundColor
我们通过style属性设置的样式都是内联样式，
而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
但是如果在样式中写了！important，则此时样式会有最高的优先级，
即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效所以尽量不要为样式添加！important
获取元素节点
<div id="box1",class="one">div1</div>
<div id="box2",class="one">div2</div>
<div id="box3",class="one">div3</div>
<input type="text" name="www" value="我是input">
通过document对象调用
1.getElementById()
-通过id属性获取一个元素节点对象
var box1=document.getElementById("box1");
id具有唯一性不要使用同名id，如果获取的id不存在结果为null
var box4=document.getElementById("box4");//null
2.getElementsByTagName(）
-通过标签名获取一组元素节点对象
获取到的是一个伪数组
var divs=document.getElementsByTagName("div");
3.getElementsByName(）
-通过name属性获取一组元素节点对象
获取到的是一个伪数组且只适用于拥有name属性的表单元素
var www=document.getElementsByName("www");
获取元素节点的子节点
通过具体的元素节点调用
1.getElementsByTagName(）
-方法，返回当前节点的指定标签名后代节点
2.childNodes
-属性，表示当前节点的所有子节点
childNodes属性会获取包括文本节点在内的所有节点
根据DOM规定，标签间空白也会当成文本节点
注意：
在IE8及以下的浏览器中，不会将空白文本当成子节点，
所以该属性在IE8中会返回4个子元素而其他浏览器是9个
children属性可以获取当前元素的所有子元素
3.firstChild
-属性，表示当前节点的第一个子节点
根据DOM规定，标签间空白也会当成文本节点
firstElementChild获取当前元素的第一个子元素
firstElementChild不支持IE8及以下的浏览器，如果需要兼容他们尽量不要使用
4.lastChild
-属性，表示当前节点的最后一个子节点
根据DOM规定，标签间空白也会当成文本节点
lastElementChild获取当前元素的最后一个子元素
lastElementChild不支持IE8及以下的浏览器，如果需要兼容他们尽量不要使用
获取父节点和兄弟节点
通过具体的节点调用
1.parentNode
-属性，表示当前节点的父节点
2.previousSibling（也可能获取到空白的文本）
-属性，表示当前节点的前一个兄弟节点
3.nextSibling（也可能获取到空白的文本）
-属性，表示当前节点的后一个兄弟节点
previousElementSibling获取前一个兄弟元素，IE8及以下不支持
innerText
-该属性可以获取到元素内部的文本内容
-它和innerHTML类似，不同的是它会自动将html标签去除
文本框的value属性值，就是文本框中填写的内容
document.body，它保存的是body的引用
document.documentElement保存的是html根标签
document.all代表页面中所有的元素
根据元素的class属性值查询一组元素节点对象
getElementsByClassName()可以根据class属性值获取一组元素节点对象，
但是该方法不支持IE8及以下的浏览器
获取到的是一个伪数组
var one=document.getElementsByClassName("one");
document.querySelector()
-需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
-虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
-使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
var one=document.querySelector("one");
document.querySelectorAll()
-该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
-即使符合条件的元素只有一个，它也会返回数组
参数为对应的选择器和名字
var onelist=document.querySelector(".one");
注意：
获取到的是一个伪数组，要在后面加上[下标(索引)]
var one=document.getElementsByClassName(“one”)[0];
或在取值时加上[下标(索引)]
console.log(one[0].id)
元素的取值和赋值
对象名.属性名
对象名[“属性名”]
console.log(one.id);
console.log(one[“id”]);
通过JS读取元素的样式：
语法：元素.style.样式名
one.style
one.style.width
one.style.backgroundColor
通过JS修改元素的样式：
语法：元素.style.样式名=样式值
one.style.backgroundColor="green"
one.style.color="red"
通过style属性设置和读取的都是内联样式
无法读取样式表中的样式
获取类名，不能直接使用class，而是className
one.className
DOM增删改
document.createElement（）
可以用于创建一个元素节点对象，
它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
并将创建好的对象作为返回值返回
document.createTextNode（）
可以用来创建一个文本节点对象
需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
appendChild（）
-向一个父节点中添加一个新的子节点
-用法：父节点.appendChild（子节点）；
insertBefore（）
-可以在指定的子节点前插入新的子节点
-语法：父节点.insertBefore（要插入的节点对象，要添加新的节点前的子节点）；
replaceChild（）
-可以使用指定的子节点替换已有的子节点
-语法：父节点.replaceChild（要插入的节点对象，要添加新的节点前的子节点）；
removeChild（）
-可以删除一个子节点
-语法：父节点.removeChild（子节点）；
另一种删除方法
-子节点.parentNode.removeChild（子节点）；
使用innerHTML也可以完成DOM的增删改的相关操作
一般我们会两种方式结合使用
练习
点击按钮隔行变色
<ul id="ul1">
<li>我是第1个li标签</li>
<li>我是第2个li标签</li>
<li>我是第3个li标签</li>
<li>我是第4个li标签</li>
<li>我是第5个li标签</li>
<li>我是第6个li标签</li>
<li>我是第7个li标签</li>
<li>我是第8个li标签</li>
</ul>
<input type="button" id="btn" value="点我呀">
<script>
// 1. 获取元素
var btn = document.getElementById("btn");
var liList = document.getElementsByTagName("li");
// 2. 注册点击事件
btn.onclick = function() {
// 3. 事件处理函数
for(var i = 0; i < liList.length; i++) {
if(i % 2 == 0) {
liList[i].style.backgroundColor = "green";
} else {
liList[i].style.backgroundColor = "red";
}
}
}
</script>
点击按钮启用和禁用来控制只读和可写
<input type="text" />
<br />
<input type="text" />
<br />
<input type="radio" />
<button id="qy">启用</button>
<button id="jy">禁用</button>
<!-- <input type="button" value="启用" id="qy">
<input type="button" value="禁用" id="jy"> -->
<!-- disabled -->
<script>
// 需求 :点击启用按钮 input的disabled属性变成false
// 点击禁用按钮, input的disabled属性变成true
// 1. 获取元素
var qy = document.getElementById("qy");
var jy = document.getElementById("jy");
var inputList = document.getElementsByTagName("input");
// 2. 注册点击事件
// 2.1 启用点击事件
qy.onclick = function() {
// 事件处理
for (var i = 0; i < inputList.length; i++) {
inputList[i].disabled = false;
}
};
// 2.2 禁用事件
jy.onclick = function() {
// 事件处理
for (var i = 0; i < inputList.length; i++) {
inputList[i].disabled = true;
}
};
