JS-DOM ～ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

1. 带有Element和不带的区别

　　　　a)  带Element的获取的是元素节点

　　　　b)  不带可能获取文本节点和属性节点

1. 获取所以子节点

　　　　a)   . childNodes

　　　　b)   . children

　　　　c)   . parentNode . children [索引]

1. . children：获取所有子节点
2. opacity：0-1；透明度
3. alpha（opacity：百分数）；IE6/7/8透明度
4. 先绑定事件再进行循环
5. previousNode（）上一个兄弟节点
6. alert（变量名）可测试变量名是否可以使用
7. 获取body，var body = document.body；

设置样式的两种方式

style

1. 行内式可以获取打印出来
2. 内嵌和外链的获取不了
3. 样式少的时候使用
4. 驼峰命名规则
5. style属性是对象属性
6. 值是字符串类型，没设置的时候是“空字符串”
7. .style. cssText = “字符串形式的样式”

　　　　

 菜单的简单练习

 style属性的练习

 改变盒子的大小和透明度

 文本框获取焦点高亮显示

 高级隔行变色

 百度皮肤

 隐藏盒子的方式

 定位和层级

dom元素的创建方法

　　1.documrnt.write（“<li></li>”）

　　　　　　A)  script写在那就创建在那

　　　　　　B)  会被覆盖

　　2.parentNode.innerHTML += “<li></li>”

　　3.已有节点.appendChild（创建的节点）；追加新节点到已有节点的最后面

var ul = document.getElementsByTagName('ul')[0];          //获取已有元素
var li = document.createElement('li');                            //创建一个li标签
var liText = document.createTextNode('我是一个LI标签'); //创建一个文本节点
ul.appendChild(li);                                                    //把li标签追加到ul最后面
li.appendChild(liText);                                            //把文本节点追加到li标签中

　　4.已有节点.insertBefore（创建的节点，已有节点的子节点节点）；在已有节点的子节点之前创建一个新的节点

var ul = document.getElementsByTagName('ul')[0];                 //获取已有元素
var li = document.createElement('li');                         　　   //创建一个li标签
var liText = document.createTextNode('我是一个LI标签');   //创建一个文本节点
li.appendChild(liText);                                               //把文本节点追加到li标签中
var list = document.getElementsByTagName('li')[2];     //获取ul的一个子节点
ul.insertBefore(li,list);                                           //添加在list标签之前

　　5.删除   父节点.removeChild（要删除的子节点）；

A)  var ul = document.getElementsByTagName('ul')[0];      //获取已有元素
var li = document.createElement('li');                            //创建一个li标签
var liText = document.createTextNode('我是一个LI标签'); //创建一个文本节点
var list = document.getElementsByTagName('li')[2];     //获取ul的一个子节点
ul.removeChild(list);                                               //删除ul里的list节点

list.parentNode.removeChild(list);                       //现照到list的父元素，在进行删除，可以不定义父元素

　　6.替换  父节点.replaceChild（新节点，老节点）；

A)  var ul = document.getElementsByTagName('ul')[0];     //创建一个文本节点
var li = document.createElement('li');                            //创建一个li标签
var liText = document.createTextNode('我是一个LI标签'); //创建一个文本节点
li.appendChild(liText);                                                //把文本节点追加到li标签中
var list = document.getElementsByTagName('li')[2]; //replaceChild 替换节点
ul.replaceChild(liText,list);                                      //liText替换叼list

　　7.克隆  var
变量 = 被克隆的节点.cloneNode（true）；  （如果true改为false，那么将克隆一个空节点）

var newNode = li.cloneNode(true);              //克隆一个li节点给变量newNode

ul.appendChild (newNode);                         //将克隆的节点添加到ul之后

　　　　

dom元素的创建

元素的操作

创建列表，高亮显示

祝愿墙

选择水果