知识点:
将HTML变成DOM树
看到HTML会画DOM树。
创建节点,添加节点,删除节点
varnodeObj = document.createElement(“节点名”); //创建元素节点
document.createTextNode(“文本”); //创建文本节点
父节点.appendChild(子节点); //把子节点添加到父节点下
父节点.removeChild(子节点);
//获得节点
document.getElementById(“id号”);
document.getElementsByTagName(“html的标签名”)[0];
父节点.getElementsByTagName(“html的标签名”)[0];
//获得子元素的节点
父节点.childNodes
父节点.firstChild
父节点.lastChild
//节点的属性
nodeType 1元素节点 2属性节点 3文本节点
nodeName 元素节点使用,返回标签名的大写字符串
nodevalue 文本节点使用,返回或设置文本
//获得兄弟节点
当前节点.nextSiblings
设置节点的属性
节点.setAttribute(属性名,值);
节点.getAttribute(属性名);
p.setAttrubute(“style”,”color:red;font-size:20px;”);
//一般做法,可以设置或获取
节点.属性名
设置文本
文本节点.nodevalue=文本;
案例:点击小图看大图
复制代码 代码如下:
body{
background-color:pink;
}
#div{
margin:40px auto;
width:900px;
}
#ul li{
float:left;
margin-right:10px;
list-style-type:none;
}
p{
background-color:silver;
width:50%;
margin:0 auto;
top:10px;
text-align:center;
}
#divShow{
width:640px;
height:400px;
margin:10px auto;
clear:both;
}



