<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h2>获取元素节点</h2>
<input type = "text" name = "zhangsan" id = "username" value = "Tom" /><br />
<input type = "text" name = "lisi" id = "usermail" value = "tom@163.com" /><br />
<a href = "https://www.baidu.com" addr = "beijing" target = "_blank" class = "apple">百度</a><br />
<input type = "button" value = "修改属性" onclick = "f11()"><br />
<div>Today is a good day</div>
<div>Hello</div>
<div>Mike</div>
<ul>
<li>red</li>
<li>blue</li>
<li>green</li>
</ul>
<ul>
<li mean="热情">red</li>
<li mean="冷静">blue</li>
<li mean="生机">green</li>
</ul>
<ul>
<li mean="饿">orange</li>
</ul>
</body>
</html>
<script>
var id = document.getElementById("username");//通过ID获取元素节点
console.log("id:" + id);//输出整个对象
var mail = document.getElementById("usermail");
console.log("mail:" + mail);
var hh = document.getElementsByTagName("h2");//通过标签名来获取元素节点
console.log("hh:" + hh);
console.log(hh[0]);//获取到的为数组，可以取数组里面的第一个元素
var its = document.getElementsByTagName("input");
console.log("its:" + its);//输出一个数组
console.log("its第二个元素：" + its[1]);//取数组里面的第二个元素
console.log("its第一个元素：" + its.item(0));//通过方法，取数组里面的第一个元素
var it = document.getElementsByName("zhangsan");
console.log("it:" + it);
var it1 = document.getElementsByName("lisi");
console.log("it1:" + it1);
//firstchild获取第一个子节点，lastchild获取最后一个节点
var v = document.getElementsByTagName("div")[0];//节点指的是面向元素
console.log(v);
console.log("第一个子节点：" + v.firstChild);
console.log("最后一个子节点：" + v.lastChild);
console.log(v.firstChild.nodeType);
console.log(v.firstChild.wholeText);//获得文本信息
var ull = document.getElementsByTagName("ul")[0];
console.log(document.getElementsByTagName("ul")[0]);//不写[0]表示的是一个集合，写表示的是一个元素
console.log(ull.childNodes);
console.log(ull.childNodes.length);//子节点长度
console.log(ull.firstChild);//获取第一个子节点
console.log(ull.firstChild.nextSibling);//获取下一个子节点
console.log(ull.lastChild);//获取最后一个子节点
console.log(ull.lastChild.previousSibling);//获取上一个子节点
//父节点获取
var fa = document.getElementsByTagName("li")[1];
console.log(fa);//li
console.log(fa.parentNode);//ul
console.log(fa.parentNode.parentNode);//body
console.log(fa.parentNode.parentNode.parentNode);//html
console.log(fa.parentNode.parentNode.parentNode.parentNode);//document
//获取属性的信息
var baidu = document.getElementsByTagName("a")[0];
console.log(baidu.href);
console.log(baidu.target);
console.log(baidu.className);//className是class的一个别名，不可以直接访问class属性
console.log(baidu.addr);//自定义的读取不到
console.log(baidu.getAttribute("href"));
console.log(baidu.getAttribute("addr"));//这种方式可以读取自定义属性
//设置属性，对读取的信息进行赋值
function f11(){
baidu.href = "https://www.so.com";
baidu.addr = "tianjin";
baidu.setAttribute("addr","shandong");
baidu.setAttribute('height','170');
console.log("height:" + baidu.getAttribute("height"));
console.log("addr:" + baidu.getAttribute("addr"));
}
var color = ['red','blue','green'];
var color_mean = ['热情','冷静','生机'];
var ull = document.createElement('ul');
for(var k in color){
var lii = document.createElement('li');//元素节点的创建
lii.setAttribute('mean',color_mean[k]);//属性设置
var txt = document.createTextNode(color[k]);//文本节点的创建
//节点追加
lii.appendChild(txt);
ull.appendChild(lii);//父节点.appendChild(子节点);
}
document.body.appendChild(ull);
//已有节点追加
var blue = document.getElementsByTagName("li")[1];//获取集合的第2个元素
var second_ul = document.getElementsByTagName("ul")[2];//获取ul集合，并且获得集合里面的第三个元素
second_ul.appendChild(blue);//blue放到最后
console.log(document.getElementsByTagName("ul")[2]);//将blue节点，追加到orange节点之后
console.log(document.getElementsByTagName("ul")[1]);//追加节点相当于复制，原有节点不变
var orange = document.getElementsByTagName("li")[6];
second_ul.appendChild(orange);//orange放到最后
second_ul.insertBefore(orange,blue);//orange放到blue前面
second_ul.replaceChild(orange,blue);//orange替代blue
console.log(document.getElementsByTagName("ul")[2]);
//节点复制
var fu_blue = blue.cloneNode(true);//深层复制，本身和内部子节点都复制
var fu_blue1 = blue.cloneNode(false);//浅层复制（本身（包括属性）节点的复制）
second_ul.appendChild(fu_blue);
second_ul.appendChild(fu_blue1);
console.log(document.getElementsByTagName("ul")[2]);
//删除节点
blue.parentNode.removeChild(blue);//删除blue节点
console.log(document.getElementsByTagName("ul")[0]);
</script>