day04 元素对象 Node对象 操作DOM树及案例

day04
1.案例一：在末尾添加节点
第一步：获取到ul标签
第二部：创建li标签
document.createElement("标签名称")方法
第三部:创建文本
document.createTextNode("文本内容");
第四步：把文本添加到li的下面


使用appendChild方法
第五步：把li添加到ul的末尾
使用appendchild方法
function add1(){
//获取ul标签
var ul1 = document.getElementById("ulid");
//创建标签
var li1 = document.createElement("li");
//创建文本
var text1 = document.createTextNode("55555");
//把文本加入到li的下面
li1.appendChild(text1);
//把li加入到ul下面
ul1.appendChild(li1);
}


2.元素对象（element对象）
**要操作element对象，首先必须获取element对象
-使用document里面相应的方法获取


**方法
***获取属性里面的值
getAttribute("属性的名称")
-var input1 = document.getElementById("inputid");
//alert(input1.value);
alert(input1.getAttribute("value"));


**设置属性的值
-input1.setAttribute("class","hha" );


**删除属性
-input1.removeAttribute("name");
**不能删除value


***想要获取标签下面的子标签
**使用属性  childNodes,但是这个属性兼容性很差
**获得标签下面的自标签的唯一有效办法，使用getElementsByTagName方法
//获取ul下面的所有标签（子元素）
//获取ul标签
var ul11 = document.getElementById("ulid1");
//获取ul下面的子标签
//var lis = ul11.childNodes;     //浏览器兼容性很差
//alert(lis.length);
var lis =  ul11.getElementsByTagName("li")
alert(lis.length);


3.Node对象属性
*nodeName

*nodeType
*nodeValue
*使用dom解析html的时候，需要html的标签，属性和文本都封装成对象


*标签节点对应的值
nodeType:   1
nodeName:  大写的标签名称  比如SPAN
nodeValue:null
*属性节点对应的值
nodeType: 2
nodeName: 属性的名称  id
nodeType:属性的值  spanid
*文本节点对应的值
nodeType:3
nodeName:#text
nodeValue:文本内容


4.Node对象的属性二
<ul>
<li>qqq</li>
<li>www</li>
</ul>
*父节点
-ul是li的父节点
-parentNode
-//得到li1
var li1 = document.getElementById("li1");
//得到ul
var ul1 = li1.parentNode;
alert(ul1.id);


*子节点
-li是ul的子节点
-childNodes:得到子节点，但是兼容性很差


-firstElementChild:获取第一个子节点
-lastElementChild:获取最后一个子节点
var ul1 = document.getElementById("ulid");
var li1 = ul1.firstElementChild;
alert(li1.id);


*同辈节点
-li之间的关系是同辈节点
-nextElementSibling:返回一个给定节点的