JavaScript学习笔记——11-12-DOM基础和应用

DOM基础

1. DOM是什么？浏览器对DOM的兼容性问题。

2. DOM节点：
   （1）子节点：
   ①方法一：childNode有兼容问题，和nodeType配合
   ②方法二：children无兼容性问题
   ③children其实是数组。
   ④示例：var oLi=oDiv.children[0]

   （2）父节点：
   ①parentNode，示例var a=oli.parentNode

   （3）首尾子节点：有兼容性问题
   ①firstChild（低级浏览器）、firstElementChild（高级浏览器）
   ②lastChild、lastElementChild

   （4）兄弟节点：有兼容性问题
   ①nextSibling、nextElementSibling
   ②previousSibling、previousElementSibling

3. 元素属性操作方法：
   （1）oDiv.style.width='200px'
   （2）oDiv.style['width']='200px'
   （3）DOM操作方法：
   ①获取：getAttribute(名称)
   ②设置：setAttribute( 名称，值)
   ③删除：removeAttribute(名称)

   DOM应用：节点的创建、插入、删除

   注意：如果是对子元素进行操作，一定要写父元素，比如：father.appendChild('li')

4. 创建节点：

   （1）createElement(标签名)，创建后不会出现在页面，只在内存。
   （2）appendChild（节点），追加一个节点，只在后面加入

5. 插入节点：
   （1）insertBefore（节点，原有节点）

6. 删除节点：
   （1）removeChild（名称）