JavaScript：从入门到精通总结五

18、DOM 文档对象模型，宿主对象

1）JS通过DOM对象对HTML文档进行操作
2）节点：文档节点、元素节点、属性节点、文本节点
3）document：文档节点
4）浏览器加载页面时，是按照自上往下顺序执行的；如果将script标签写到页面的上面，在代码执行时，页面还没有加载
5）window.onload 该事件是页面加载完成之后触发
6）js代码建议写到页面下面，对性能比较好
7）document.getElementById()、getElementsByTagName()、getElementsByName()、getElementsByClassName()
8）innerHTML获取元素内部得HTML代码；元素id/name/type/name都可以直接通过:元素.属性名获取，但是class需要通过:元素.className获取
9）通过元素节点调用：方法：getElementsByName()；属性：childNodes、firstChild、lastChild、children、firstElementChild、parentNode、previousSibling
10）document.body(保存的body的引用）、document.documentElement（保存的是html根标签）、document.all(页面中所有元素)
11）document.querySelector():可以以CSS选择器来查询一个元素节点对象，只返回第一个选择的对象；所有浏览器都支持；类似：querySelectorAll

19、DOM增删改

1）创建元素节点：document.createElement(“标签名”)
2）创建文本节点：document.createTextNode(“文本内容”)
3）向父节点中添加新的子节点：父元素.appendChild(子节点)
4）在指定的子节点前面插入新的子节点：父节点.insertBefore(新的子节点, 指定的子节点)
5）替换子节点：父节点.replaceChild(替换的子节点, 被替换的子节点)
5）删除子节点：父节点.removeChild(子节点)
6）修改节点内容：节点.innerHTML = 要修改的内容
7）confirm()用于弹出一个带有确认和取消的对话框

20、DOM操作CSS

1）修改元素的样式：元素.style.样式名 = 样式值
2）如果CSS的样式名中有-，这种名称在JS中是不合法的，需要将这种样式名修改为驼峰命名法；
3）通过JS修改的style都是内联样式，所有具有较高的优先级，样式会立即显示；如果样式中写！important，此样式会有较高的优先级，JS也无法覆盖该样式，失效
4）读取元素样式：元素.style.样式名；通过JS style属性读取的都是内联样式，无法读取样式表中的样式
5）获取元素正在显示的样式：元素.currentStyle.样式名；只有IE浏览器支持，其他都不支持；在其他浏览器中通过getComputeStyle(元素，null)，该方法返回对象，IE9以下浏览器不支持
6）通过currentStyle和getComputeStyle获取的样式都是只读的，不能修改
7）clientWidth、clientHeight属性可以获得可见宽度和高度，不带px，包括内边距和外边距，不包括线宽；都是只读的，不能修改
8）offsetWidth、offsetHeight，包括内边距、外边距、和线宽
9）offsetParent获取当前元素最近的开启了定位的祖先元素；否则返回body
10）offsetLeft、offsetTop相对于其定位父元素水平和垂直偏移量
11）当表单属性添加disabled="disabled"则表单项将变成不可用的状态