第5章 DOM详解

1.1 知识点

1. 带Element与不带Element的区别

带Element获得的是元素节点，不带获取的是任意节点(元素节点，文本节 点，属性节点）

2. 获取指定的兄弟节点

div.parentNode.children[index]

3. Javascript:void(0):表示不做任何动作

<a href="javascript:void(0);"></a> :表示这个链接不做跳转动作

4. opacity:0.1;透明度

5. alert(变量名)可测试变量名是否可以使用

6. 获取body：var body=document.body;

 

1.2 访问关系封装

1. 将对节点的操作函数，写到一个js文件中

function getFirstNode(ele){函数体);

function getLastNode(ele){函数体}

 

1.2.1 菜单练习

1. 点击a链接，让a链接对应的li标签添加类，其他的li标签类名清空

 

1.2.2 设置样式的两种方法

1. className

2. style

1.2.3 style属性设置和获取

1. 样式少的时候使用

2. style是一个对象，不能获取内嵌和外链，只能获取行内式

3. Style的值是字符串，没有设置值是“”；

4. 命名规则，驼峰命名。和css不一样

5. 设置了类样式不能获取。（只和行内式交互，和内嵌和外链无关）

6. box.style.cssText = “字符串形式的样式”；填写多个css样式

 

1.2.4 style常用属性

1. backgroundColor

2. backgroundImage

3. color

4. width

5. height

6. Border

7. opacity (IE8以前filter: alpha(opacity=xx)) 透明度

 

1.2.5 隐藏显示

1. display

元素隐藏后，不占位置，页面上的元素会重新排列

2. visibility

元素隐藏后，占位置

hidden

visible

3. opacity、position

 

1.2.6 位置

1. position

2. left

3. top

4. right

5. bottom

6. z-index

 

 

 

1.3 DOM元素操作

1.3.1 创建元素

1. 方式一：

document.write()

不常用，因为容易覆盖原来的页面

2. 方式二：

innerHTML

用的比较多，绑定属性和内容比较容易（节点套节点）

3. 方式三：

createElement()

也用的比较多，指定数量的时候一般用它

1.3.2 操作方式三创建的元素

1. appendChild()

2. removeChild()

3. insertBefore()

4. replaceChild(新节点,老节点);新的替换老的

5. cloneNode(true)复制节点，有true深层复制，没有只复制当前节点

a) 新节点=被复制节点.cloneNode(true)

 

1.3.3 创建添加删除元素

案例：水果案例

问题：直接操作元素会导致长度原来越短。不会让所有元素都移动到另一侧。解决：反过来。添加的时候用insertBefore()或者数组。

for(var i=opts.length-1;i>=0;i--){

   sel2.appendChild(opts[opts.length-1-i]);

}