DOM小知识

获取元素节点

		//1、document.getElementById(id)通过Id获取
		var eleNode=document.getElementById("classlist");
		console.log(eleNode); //获取一个对象--ul

		//2、document.getElementsByTagName(标签名)通过便签名获取
		var eleList=document.getElementsByTagName("li");
		console.log(eleList);//获取一个节点对象集合(不是数组)
		console.log(eleList[0]);//获取集合中的第一个数据
		
		//3、document.getElementsByClaaName(class名)通过类名获取
		var eleItem=document.getElementsByClassName("item");
		console.log(eleItem);//获取一个节点对象集合(不是数组)

1.获取属性值和设置属性值

//getAttribute(key) 获取节点中属性key的值
		var op=document.getElementsByTagName("p")[0];
		console.log(op);
		var title=op.getAttribute("title");
		console.log(title);
//setAttribute(name,value) 设置属性值
		var opp=op.setAttribute("id","box");

2.节点对象的其他属性

var ele=document.getElementById("box");
		console.log(ele.childNodes);//显示所有孩子节点
		console.log(ele.childNodes[0]);//#text 属于换行占用的空格显示文本
 //firstchild、lastchild、parentNode、nextSibling(同级下一个节点)、previousSibling(上一个节点)
 		console.log(ele.firstChild);//第一个索引
 		console.log(ele.parentNode);//父级标签 --body
 		console.log(ele.nextSibling);  //同级下一个兄弟节点
 		console.log(ele.previousSibling);//同级上一个兄弟节点

3.动态操作节点

1、创建节点：createElement()
2、插入节点：appendChild()–在后面插入
             insertBefore(newNode,node)–在node前面插入
3、删除节点：removeChild(childNode)
4、替换节点：replaceChild(newNode,oldnode)
5、创建文本节点：createTextNode()

//创建一个p节点
var newnode=document.createElement("p");

//给old后面插入一个孩子节点
		old.appendChild(newnode);
//第一个属性是新插入的节点，第二个属性是参考节点（确定插入位置）
		old.insertBefore(newnode2,old2);
//直接插入文本、标签
		newnode.innerHTML="可以显示文本、标签等";
		newNode.innerText="只能文本形式显示";

4.删除孩子节点removeChild(childnode)

old.removeChild(old2);

5.替换孩子节点 replaceChild(newNode,oldNode)

var list=document.createElement("a");
    		old.replaceChild(list,old2);

//新建一个文本节点
var texts=document.createTextNode("知道了");

4.动态操作样式

方法一：

op.style.color="white";
op.style.backgroundColor="red";
op.style.width="100px";

方法二：创建一个属性，然后给它在style中设置样式

op.setAttribute("class","yp");

5.onclick事件

//颜色切换
	var isBlue=true;
	node.onclick=function(){
		if(isBlue){
			this.style.backgroundColor="red";
			isBlue=false;
		}else{
			this.style.backgroundColor="blue";
			isBlue=true;
		}
	}

6.鼠标悬浮事件

function over(){
		this.style.backgroundColor="red";	
	}
function out(){
		this.style.backgroundColor="green";
	}
	node.onmouseover=over;
	node.onmouseout=out;

7.表单控件上-光标聚焦和失焦事件

聚焦

 node1.onfocus= function(){
    		newnode1.innerHTML="请输入用户名";
    		newnode1.setAttribute("class","hint");
    		node1.parentNode.appendChild(newnode1);
    		// console.log(this.value);
    	}

移除

 node1.onblu= function{
    			var n=this.value;
    			// console.log(n);
    			if(n!="yyqx"){
    				newnode1.innerHTML="请输入正确的用户名";
    				newnode1.setAttribute("class","hint");
    				node1.parentNode.appendChild(newnode1);
    			}else{
    				node1.parentNode.removeChild(newnode1);
    			}
    		}

8.内容选中事件和内容改变事件

node1.onselect=function (){
		console.log("内容被选中");
	}
	node1.onchange=function(){
		console.log("内容被改变");
		console.log(this.value);//输出内容
	}
	node1.oninput=function(){
		console.log("内容被实时改变了");
	}

9.窗口加载事件

//定时以便文档元素加载完成再执行

setTimeout(function(){
			//执行代码
		},0);

等待文档元素加载完成才会调用onload()—再一次调用将被覆盖

window.onload=function(){
			//执行代码
	}