Javascript DOM加强

1，DOM的概念：

文档对象模型：document object  model，就是一个模型（模子），他会将我们的文档（html,xml）转化成javascript 可以操作的对象

2，结构：

通过分析：DOM把HTML解析成2部分（head,body）(2个子节点)，这样形成了一棵家谱树

有哪几部分组成：（通过节点）

DOM------

元素节点 

（1）document.getElementById(‘id值’)

（2）Document.getElementsByName(“元素名称”)

一般情况下，我们用于表单，（考虑到浏览器的兼容性）

（3）document.getElementsByTagName(“标签名”)

属性节点

获得属性节点

getAttribute（“属性名”）

修改属性节点

setAtrribute(‘属性名’,’新的属性值’)

文本节点

textNode获得文本节点

获得所有p元素的内容

把文本域 变成 按钮

/*

//第一步，获得所有的元素节点（节点列表）

var ps = document.getElementsByTagName("p");

//第二步，定位到具体的某一个元素节点（数组下标,0表示第一个节点）

//第三步，找到当前元素的内容

alert(ps[0].innerHTML);

for(){

}

//第二种方法，通过分析发现id属性有规律 p1 p2

for(var i=1;i<=5;i++){

document.getElementById("p"+i).innerHTML;

}

*/

document.getElementById("username").setAttribute("type","button");

网页换肤

function changeColor(c){

document.bgColor = c;

}

Javascipt DOM的增删改查

增：

//给当前的div创建（增加一个节点（元素））

var p = document.createElement("p");

var text = document.createTextNode("我创建的元素");

p.appendChild(text);

var div = document.getElementById("skin");

div.appendChild(p);

//创建一个 文本框（默认显示请输入用户名）

var input = document.createElement("input");

input.setAttribute("type","text");

input.setAttribute("value","请输入用户名");

div.appendChild(input);

删：

var div = document.getElementBy