获取元素节点
//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(){
//执行代码
}