- 111
- 222
- 333
- 444
function add1() {
// 获取ul标签
var ul1=document.getElementById("ulid");
// 创建标签
var li1=document.createElement("li");
// 创建文本
var text=document.createTextNode("555");
// 把文本加入到li下面
li1.appendChild(text);
// 把li加入到ul下面
ul1.appendChild(li1);
}
Node对象的属性:nodename,nodetype,nodevalue
使用dom解析html时候,需要html里面的标签,属性和文本都封装成对象
哈哈哈
// 标签对象
var span1=document.getElementById("spanid");
alert(span1.nodeName);// SPAN
alert(span1.nodeType);// 1
alert(span1.nodeValue);// null
// 属性
var id1=span1.getAttributeNode("id");
alert(id1.nodeName);// id
alert(id1.nodeType);// 2
alert(id1.nodeValue);// spanid
// 文本
var text1=span1.firstChild;
alert(text1.nodeName);// #text
alert(text1.nodeType);// 3
alert(text1.nodeValue);// 哈哈哈
标签节点对应的值
nodetype=1 nodename=大写标签名称 nodevalue=null
属性节点对应的值
nodetype=2 nodename=属性名称 nodevalue=属性的值
文本节点对应的值
nodetype=3 nodename=#text nodevalue=文本内容
Node对象的属性:父节点,子节点, 同辈节点
ul是li的父节点 li是ul的子节点 li之间关系是同辈节点
parentnode表示父节点 childnodes得到所有子节点,但是兼容性很差
firstnode获取第一个子节点 lastnode获取最后一个子节点
nextsibling返回一个给定节点的下一个兄弟节点
previsoussibling返回一个给定节点的上一个兄弟节点
- aaaaaaaaaaaa
- ssdsds
- ssssss
- dsdads
var li1=document.getElementById("li1");
var ul1=li1.parentNode;
alert(ul1.id);
var ul2=document.getElementById("ulid");
var li2=ul2.firstChild;
alert(li2.id);
var li3=li1.nextSibling;
alert(li3.id);
var li4=li3.previousSibling;
alert(li4.id);
操作Dom树
Node对象appendchild方法 添加子节点到末尾 特点:类似于剪切黏贴的效果
#div1 {
width:200px;
height:150px;
border:2px solid red;
}
#div2 {
width:250px;
height:150px;
border:5px dashed green;
}
- tom
- mary
- jack
function add11() {
var div2=document.getElementById("div2");
// 获取ul
var ul1=document.getElementById("ulid");
// div1添加到div2
div2.appendChild(ul1);
}
Node对象insertbefore方法使用
- tom
- mary
- jack
- kobe
- james
function add11() {
var li3=document.getElementById("li3");
var li5=document.createElement("li");
var text5=document.createTextNode("董小宛");
// 把文本添加到li下面appendchild
li5.appendChild(text5);
// 获取到ul
var ul2=document.getElementById("ulid");
ul2.insertBefore(li5,li3);
}
Node对象removechild方法删除节点,通过父节点删除
function add11() {
// 获取到ul
var ul1=document.getElementById("ulid");
var li1=document.getElementById("li1");
ul1.removeChild(li1);
}
Node对象替换节点replacechild(newnode,oldnode)使用新的节点替换旧的节点
- tom
- mary
- jack
- kobe
- james
function replace1() {
// 获取到ul
var ul1=document.getElementById("ulid");
var li1=document.getElementById("li1");
var li6=document.createElement("li");
var text6=document.createTextNode("张无忌");
li6.appendChild(text6);
ul1.replaceChild(li6,li1);
}