JS基础概念整理与简单练习-Part3
DOM相关知识1：
-
节点(Node)是构成HTML文档的最基本的单元。
-
常用节点分为四类：
-
文档节点：整个HTML文档
-
元素节点：HTML文档中的HTML标签
-
属性节点：元素的属性
-
文本节点：HTML标签中的文本内容
-
节点的属性
-
获取并修改文本节点的属性
-
<script>得写在下面<button>下面，不然找不到// 因为浏览器在加载一个页面时，是按照自上而下的顺序加载的，读到js时DOM对象还没加载。
-
使用window.onload可以保证整个页面加载完成后再执行。//可以把head里的代码写到window.onload里。
-
但是先加载了js会等等再执行，对性能处理不好。
DOM查询-练习2
DOM相关知识2：
-
获取body标签的方法
// 第一种,像获取其他标签一样 var body = document.getElementsByTagName("body")[0]; // 第二种,调用document中的body属性 var body = document.body;
-
document中的其他属性
// html根标签 var html = document.documentElement; // 所有元素 var all = document.all; all = document.getElementsByTagName("*");
-
根据元素的class属性查询一组元素节点（IE9+）
document.getElementsByClassName();
-
根据一个CSS选择器来查询元素节点对象
document.querySelector();
-
使用该方法总会返回第一个元素，且只会返回一个 --> 可用querySelectorAll（返回数组）
-
虽然IE8中没有getElementsByClassName，但可以使用querySelector代替
-
一些DOM对象方法（都是document.以下方法）
-
DOM增删改相关操作--添加新节点的两种方法
-
但是第二种方法相当于把整个innerHTML重新赋值，所以一般两种方法结合使用。比如：
DOM添加删除记录-练习6
-
取消标签<a>自动跳转的默认行为：
-
法1：在响应函数内加入return false；
-
法2：写成<a href="javascript:;">；
-
向<table>里增加新行出现的问题：
-
解决方法：加到<table>下面的<tbody>里
-
为什么单机响应函数中的this 不等于 allA[i]？
-
for循环会在页面加载完成后立即执行，而响应函数在超链接被点击时才执行。当响应函数执行时，for循环早已执行完毕。当for循环停止时i=3（共有3个超链接），所以在响应函数中用allA[i]相当于是allA[3]（undefined）。
使用DOM操作CSS
-
通过JS修改元素的样式：元素.style.样式名 = 样式值
-
读取元素的内联样式：元素.style.样式名
-
通过style属性读取和修改的都是内联样式，无法读取样式表中的样式。
-
通过JS获取元素当前正在显示的样式：元素.currentStyle.样式名 //只有IE浏览器支持，也可元素.currentStyle[样式名]
-
如果当前元素没有设置样式,则获取它的默认值。
-
只读不能修改，要修改只能通过style属性
-
其他浏览器获取元素当前正在显示的样式：getComputedStyle(元素, null ) .样式名 //是window的方法，也可getComputedStyle(元素, null ) [样式名]
-
需要两个参数：① 获取样式元素 ② 传递一个伪元素，一般都设null
-
该方法会返回一个参数，对象中封装了当前元素对应的样式，可以通过对象.样式名读取样式。
-
如果获取的样式没有设置，则会获取到真实值，而不是默认值。
-
比如width:（真实值：335px）（默认值：auto）。
-
该方法不支持IE8及以下浏览器。//正常浏览器支持(排斥IE8)
-
只读不能修改，要修改只能通过style属性
-
如何兼容：（不用判断浏览器版本获得样式）
-
第一种写法虽然可以用，但是不该把兼容问题丢给try-catch处理
-
第二种写法借用了浏览器找不到属性会返回undefined
-
但是一定要写window.getComputedStyle 而不是getComputedStyle，因为前者是一个对象的属性（找不到返回undefined），而后者是变量（找不到就报错）。
-
undefined转为Boolean值是"false"。
-
注：if-else单结构可以写成三元运算符(? : )，我认为可读性不强
-
其他样式操作属性
-
可见宽度/高度指的是 内容+内边距（content+padding），没有边框
-
该属性不带px，返回的是一个数字可以计算
-
只读不能修改，要修改只能通过style属性
-
获取元素整个宽度/高度 （content+padding+border）
-
offsetParent可以用来获取当前元素的定位父元素，即box1会获取到离当前元素最近的开启了定位的祖先元素（默认的static不算开启定位）
-
如果均没开启定位，就返回body
-
offsetLeft：当前元素相对于其定位父元素的水平偏移量
-
offsetTop：当前元素相对于其定位父元素的垂直偏移量
-
scrollHeight可以获取元素整个滚动区域的高度
-
clientHeight可以获取元素整个可视区域的高度
-
scrollWeight可以获取元素整个滚动区域的宽度
-
scrollLeft可以获得水平滚动条滚动的距离
-
scrollTop可以获得垂直滚动条滚动的距离
-
当满足 scrollHeight - scrollTop == clientHeight 时，说明垂直滚动条到底了。
使用DOM操作CSS -练习1
-
如果为表单添加disabled="disabled"，则表单项将变成不可用状态
-
为了防止scrollTop不是整数，
