day_4(element对象、node的属性、操作dom树)

1、案例一：在末尾添加节点
第一步：获取到ul标签
第二步：创建li标签
var li1 = document.createElement("标签名称");
第三步：创建文本
document.createTextNode("文本内容");
第四步：把文本添加到li下面
li1.appendChild(tex1);
第五步：把li添加到ul末尾
ul1.appendChild(li1);

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

**方法
***获取属性里面的值
-getAttribute("属性名称");
var input1 = document.getElementById("inputid");
alert(input1.value);
alert(input1.getAttribute("value"));
***设置属性的值
var input1 = document.getElementById("inputid");
alert(input1.setAttribute("id"));
input1.setAttribute("class","haha");
alert(input1.getAttribute("class"));
***删除属性
input1.removeAttribute("name");
但是不能删除value值
alert(input1.getAttribute("value"));
input1.removeAttribute("value");
alert(input1.getAttribute("value"));
**想要获取标签下面的子标签
**使用属性childNodes，但是这个属性对浏览器的兼容性很差
**获得标签下面子标签的唯一有效办法，使用getElementsByTagName方法
//获取ul下面的子标签
var lis = ul11.childNodes;
alert(lis.length);
var lis = ul11.getElementsByTagName("li");
alert(lis.length);

3、Node对象属性
*nodeName
*nodeType
*nodeValue

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

*获取标签对象
var sp1 = document.getElementById("spanid");

alert(sp1.nodeName);// 1
alert(sp1.nodeType);//SPAN
alert(sp1.nodeValue);//null

*属性
var id1 = sp1.getAttributeNode("id");
alert(id1.nodeType);// 2
alert(id1.nodeName);//id
alert(id1.nodeValue);//spanid

*文本
var txt1 = sp1.firstChild;
alert(txt1.nodeType);//3
alert(txt1.nodeName);//#text
alert(txt1.nodeValue);//文本内容

4、Node对象的属性二
*父节点
-ul是li的父节点
-parentNode
-li是ul的子节点
-childNodes:得到所有的子节点，但是兼容性很差
-firstChild：获取第一个子节点
var ul1 = document.getElementById("ul_id");
var li1 = ul1.firstChild;
alert(li1.id);
-lastChild：获取最后一个子节点
<ul>
<li>qqqqq</li>
<li>wwwww</li>
</ul>
*子节点
*同辈结点
-li之间关系是同辈节点
var li3 = document.getElementById("li3");
var li4 = li3.nextSibling;
alert(li4.id);

5、操作DOM树
**appendChild方法
-添加子节点到末尾
-特点：类似于剪切粘贴的效果
**insertBefore(newNode,oldNode)方法
-在某个节点之前插入一个新的节点
-两个参数
*要插入的节点
*在谁之前插入
-插入一个节点，节点不存在，创建
1、创建标签
2、创建文本
3、把文本添加到标签下面
function insert1(){
/***
* 1、获取li13标签
* 2、创建li
* 3、创建文本
* 4、把文本添加到li下面
* 5、获取到ul
* 6、把li添加到ul下面
*/
var li13 = document.getElementById("li13");
var li15 = document.createElement("li");
var text15 = document.createTextNode("jjjjj");
li15.appendChild(text15);
var ul21 = document.getElementById("ulid21");
ul21.insertBefore(li15,li13);
}
**removeChild方法：删除节点
-只能通过父节点删除
1、获取到要删除的标签
2、获取到父节点标签**1、通过id获取；2、通过属性parentNode获取
3、执行删除

**replaceChild（newNode，oldNode）：替换节点
-通过父节点替换
1、获取到要替换的标签
2、创建标签
3、创建文本
4、添加文本到标签
5、获取到父节点标签**1、通过id获取；2、通过属性parentNode获取
6、执行替换
function insert1(){
/***
* 1、获取li13标签
* 2、创建li
* 3、创建文本
* 4、把文本添加到li下面
* 5、获取到ul
* 6、把li添加到ul下面
*/
var li13 = document.getElementById("li13");
var li15 = document.createElement("li");
var text15 = document.createTextNode("jjjjj");
li15.appendChild(text15);
var ul21 = document.getElementById("ulid21");
ul21.replaceChild(li15,li13);
}
**cloneNode（boolean）：复制子节点
-把ul列表复制到另一个div里
1、获取ul
2、执行复制方法复制
3、把复制之后的内容放到div里
**获取div
**appendChild方法
function copy11(){
var ul11 = document.getElementById("ulid11");
var ulcopy = ul11.cloneNode(true);
var div22 = document.getElementById("div2");
div22.appendChild(ulcopy);
}
**操作dom总结
*获取结点使用方法
getElementById():通过节点的id属性，查找对应结点
getElementsByName():通过节点的name属性，查找对应节点
getElementsByTagName():通过结点名称，查找对应节点
*插入节点方法
insertBefore(newNode,oldNode)：在某个节点之前插入
appendChild方法：在末尾添加，剪切粘贴
*删除节点方法
removeChild方法：通过父节点删除
*替换节点方法
replaceChild(newNode，oldNode):通过父节点替换
6、innerHTML属性
-不是dom的组成部分，但是大多数浏览器都支持的属性

-作用
-获取文本内容
//获取span标签里的内容
var spa1 = document.getElementById("sid");
alert(spa1.innerHTML);

-向标签里面设置内容（可以是html代码）
//向div里面设置内容
//获取到div
var div11 = document.getElementById("div11");
div11.innerHTML = "<h1>AAAAAAA</h1>";
**练习：向div里添加一个表格
var tab = "<table border='1'><tr><td>aaaaaaaaa</td></tr><tr><td>bbb</td></tr><tr><td>ccc</td></tr></table>"
div11.innerHTML= tab;