1、节点
（1）节点的属性
nodeType：节点的类型 1--标签，2--属性，3--文本
nodeName：节点的名字：标签节点--大写的标签名字，属性节点--小写的属性名字，文本节点--#text
nodeValue：节点的值：标签节点--null，属性节点--属性值，文本节点--文本内容
（2）凡是获取节点的代码的代码在谷歌和火狐得到的都是相关的节点，凡是获取元素的代码在谷歌和火狐得到的都是相关的元素，从子节点和兄弟节点开始，但是获取节点的代码在IE8中得到的元素，获取元素相关代码，在IE8中得到的是undefined，元素的代码IE中不支持
2、通过节点点击按钮p变色
<input type="button" value="变色" id="btn"/>
<div>
<span>这是span</span>
<p>这是p</p>
<span>这是span</span>
<p>这是p</p>
<a href="#"></a>
</div>
<script src="common.js"></script>
<script>
my$("btn").onclick=function(){
var dvObj=my$("dv");
var nodes=dvObj.childNodes;
for(var i=0;i<nodes.length'i++){
if(nodes[i].nodeType==1&&nodeName=="p"){
nodes[i].style.backGroundColor="red";
}
}
};
</script>
3、隔行变色
<input type="button" value="变色" id="btn"/>
<ul id="uu">
<li></li>
<li></li>
<li></li>
</ul>
<script src="common.js"></script>
<script>
my$("btn")=function(){
var count=0; //记录多少li
var nodes=my$("uu").childNodes;
for(var i=0;i<nodes.length;i++){
if(nodes[i].nodeType==1&&nodeName=="LI"){
nodes[i].style.backGroundColor=count%2==0?"red":"yellow";
count++;
}
};
</script>
4、节点兼容代码
父级元素第一个子元素
<ul id="uu">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<script src="common.js"></script>
<script>
function getFirstElementChild(element){
if(element.firstElementChild){
return element.firstElementChild;
}else{
var node=element.firstChild;
while(node&&node.nodeType!=1){
node=node.nextSibling;
}
return node;
}
}
</script>
父级元素最后一个子元素
function getLastElementChild(element){
if(element.LastElementChild){
return element.LastElementChild;
}else{
var node=element.firstChild;
while(node&&node.nodeType!=1){
node=node.previousSibling;
}
return node;
}
}
</script>
5、背景切换
<body id="bd">
<div id="mask">
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="3.jpg"/>
</div>
<script src="common.js"></script>
<script>
var imgObjs=my$("mask").children;
for(var i=0;i<imgObjs.length;i++){
imgObjs[i]onclick=function(){
my$("bd").stle.backgroundImage="url("+this.src+")";//变量用拼接
};
}
</script>
</body>
6、全选全不选
<thead><input type="checkbox" id="j_cbAll"/></thead>
<tbody id="j_tb"></tbody>
<script src="common.js"></script>
<script>
var ckAll=my$("j_cbAll");
var cks=my$("j_tb").getElementByTagName("input");
ckAll.onclick=function(){
for(var i=0;i<cks.length;i++){
cks[i].checked=this.checked;
}
};
for(var i=0;i<cks.length;i++){
cks[i].onclick=function(){
var flag=true;//默认所有复选框都被选中
for(var j=0;j<cks.length;j++){
if(!cks[j].checked){
flag=false;
break;
}
}
ckAll.checked=flag;
};
}
</script>
7、元素创建
（1）第一种方式：document.write("标签代码及内容"); 如果在页面加载完毕后创建元素，页面中的内容会被干掉
（2）第二种方式：对象.innerHTML="标签代码及内容";
（3）第三种方式：document.createElement("标签名字");得到的是一个对象，
父级元素.appenfChild(子集元素对象);
父级元素.inerdetBefore(新的子集对象，参照的子集对象);
父级元素.removeChild(要干掉的子集元素对象);
8、创建列表
var names=["1","2","3","4"];
my$("btn").onclick=function(){
var str="<ul style'list-style-type:none;cursor:pointer'>";
for(var i=0;i<names.length;i++){
str+="<li>"+names[i]+"</li>";
}
str+="</ul>";
my$("dv").innerHTML=str;
var list=my$("dv").getElementByTagName("li");
for(var i=0;i<list.length;i++){
list[i].onmouseover=function(){
this.style.backgroundColor="yellow";
};
list[i].onmouseout=function(){
this.style.backgroundColor="";
};
}
};
9、创建列表
<input type="button" value="创建列表" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
var kungfu=["1","2","3","4","5"];
my$("btn").onclick=function(){
var ulObj=document.createElement("ul");
my$("dv").appendchild(ulObj);
for(var i=0;i<kungfu.length;i++){
var liObj=document.createElement("li");
liObj.innerHTML=kungfu[i];
ulObj.appendchild(liObj);
liObj.onmouseover=mouseoverHandle;
liObj.onmouseout=mouseoutHandle;
}
};
function mouseoverHandle(){
this.style.backgrondColor="red";
}
function mouseoutHandle(){
this.style.backgrondColor="";
}
</script>
如果是循环方式添加事件，推荐用命名函数；如果不是循环方式添加事件，推荐用匿名函数
10、创建表格
<input type="button" value="创建表格" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
var arr=[
{name:"百度"，href:"http://www.baidu.com"},
{name:"百度"，href:"http://www.baidu.com"},
{name:"百度"，href:"http://www.baidu.com"},
{name:"百度"，href:"http://www.baidu.com"}
];
my$("btn").onclick=function(){
var tableObj=docu ment.createElement("table");
my$("dv").appendchild(tableObj);
for(var i=0;i<arr.length,i++){
var dt=arr[i];
var trObj=document.createElement("tr");
tableObj.appendchild(trObj);
var td1=document.createElement("td");
td1.innerText=dt.name;
trObj.appendchild(td1);
var td2=document.createElement("td");
td2.innerHTML="<a href="+dt.href+">"+dt.name+"</a>";
trObj.appendchild(td2);
}
};
</script>
11、只创建一个按钮
my$("btn").onclick=function(){
if(!my$("btn2")){
var obj=document.createElement("input");
obj.type="button";
obj. value="按钮";
obj.id="btn2";
my$("dv").appendchild(obj);
}
};
12、为元素绑定事件
（1）对象.addEventListener("事件类型"，事件处理函数，布尔false);ie11、火狐、谷歌支持，ie8不支持，this是当前绑定时间
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
<script>
my$("btn").addEventListener("click",function(){},false);
</script>
（2）attachEvent("事件名字"，有on，事件处理函数);火狐、谷歌、ie11不支持，ie8支持，this是window
my$("btn").attachEvent("onclick",function());
（3）对象.on事件名字=事件处理函数
my$("btn")=onclick=function(){};
13、元素绑定时间兼容代码
function addEventListener(element,type,fn){
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type]=fn;
}
}