这是我参与更文挑战的第31天，活动详情查看: 更文挑战
1, DOM 查询
(1) 获取body标签
var body = document.getElementsByTagName('body')[0]
在document中有一个属性body， 保存了body的引入
var body = document.body
// 保存html标签
var html = document.documentElement
// 页面所有元素
var all = document.all
或者
all = document.getElementsByTagName("*")
(2) 根据元素的class属性值查询一组元素节点对象
var box = document.getElementsByClassName("box")
// 获取页面所有的DIV
var div = document.getElementsByTagName('div')
// 获取指定的DIV
通过CSS选择器
var abox = document.querySelector(".box div")
注意：兼容性最好的就是： querySelector(), 但是如果查询的选择器有多个，它只返回第一个， 如果想返回多个，可以用：querySelectorAll()
2, DOM增删改查
（1） 添加新的子节点
// 创建广州li元素节点, 需要一个标签名作为参数
var li = document.createElement("li")
// 创建文本节点, 需要一个文本内容作为参数
var text = document.createTextNode(“广州”)
// 文本节点添加到li中，作为子节点
li.appendChild(text)
var city = document.getELementById('city')
city.appendChild(li)
（2）删除子节点
// 父节点调用
city.removeChild(节点)
（3） 替换子节点
// 替换子节点, 父节点调用
city.replaceChild('新节点'， "旧节点")
（4） 插入子节点
// 在指定的子节点前面插入新的子节点
city.insertBefore(新节点, '旧节点')
注意1：可以不获取父元素，直接：
子节点.parentNode.removeChild(子节点)
注意2： 可以通过innerHTML完成增加操作
obj.innerHTML += "<li>广州</li>"
3, JS修改样式
(1) 内联样式
语法： 元素.style.样式名 = 样式值
// 获取box
var box = document.getElementById('box')
// 修改box样式
box.style.width = "300px";
// 修改颜色,
box.style.backgroundColor = "yellow"
注意： 如果CSS样式名中又 -， 需要将这种样式名修改成驼峰命名法。
我们通过style属性设置的样式都是内联样式，读取的也是内联样式。
（2） 读取当前元素正在显示的样式
box.currentStyle.width
box.currentStyle.backgroundColor
注意： currentStyle只有IE能够使用，其他浏览器getComputedStyle()
需要两个参数： 第一个： 要获取样式的元素
第二个： 可以传递一个伪元素，一般为null
返回是一个对象，这个对象封装了当前元素对应的样式，可以通过获取的对象，去读取样式。
getComputedStyle(box1, null).width
定义一个函数，用来获取指定元素的当前样式
/*
* obj :要获取样式的元素
* name: 要获取的样式名
*/
function getStyle(obj, name) {
// 正常浏览器
return getComputedStyle(obj, null)[name]
// IE8浏览器
/// return obj.currentStyle[name]
}
// 最终优化版本
function getStyle(obj, name) {
if(window.getComputedStyle) {
return getComputedStyle(obj, null)[name]
} else {
return obj.currentStyle[name]
}
}
或者
function getStyle(obj, name) {
return window.getComputedStyle ? getComputedStyle(obj, null)[name] : obj.currentStyle[name]
}
总结：通过currentStyle 和 getComputedStyle() 读取的样式都是只读属性，不能修改，如果修改必须通过style属性
4, 其他样式
（1） clientWidth/clientHeight
这两个属性可以获取元素的可见宽度和高度，包括内容区和内边框。 不带px， 且都是只读属性，无法修改
（2） offsetWidth/offsetHeight
可以获取元素的整个宽度和高度，包括内容区，内边框，和边框
（3） offsetParent
可以用来获取当前元素的定位父元素， 会获取到离当前元素最近的开启了定位的祖先元素。
(4) offsetLeft
当前元素相对于其定位父元素的水平偏移量
（5）offsetTop
当前元素现对于其定位父元素的垂直偏移量
（6）scrollWidth/scrollHeight
可以获取整个滚动区域的宽度和高度
（7）scrollLeft/scrollTop
可以获取水平滚动条滚动的距离/垂直滚动条滚动的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滚动条滚动到底</title>
<style>
#info {
width: 300px;
height: 500px;
background-color: indianred;
overflow: auto;
}
</style>
</head>
<body>
<h3>欢迎大家注册</h3>
<p id="info">
你猜猜xxxx省略50000
</p>
<input type="checkbox" disabled="disabled" />我已经仔细阅读协议，一定遵守
<input type="submit" value="注册" disabled="disabled" />
</body>
</html>
<script>
window.onload = function() {
/**
* 当滚动条滚动到低的时候，检查滚动条
*/
// 获取滚动条
var info = document.getElementById('info')
var inputs = document.getElementsByTagName('input')
window.addEventListener('onscroll', function() {
console.log('我滚动了')
} )
info.onscroll = function() {
console.log('我是scrollHeight=' + info.scrollHeight)
console.log('我是scrollTop=' + info.scrollTop)
console.log('我是clientHeight=' + info.clientHeight)
if(info.scrollHeight - info.scrollTop === info.clientHeight) {
inputs[0].disabled = false
inputs[1].disabled = false
}
}
}
</script>
