一、document.getElementById() 根据id获取元素节点
<p id="jintian">今天是星期四</p> <p id="mingtian">明天是星期五</p> var mingtian=document.getElementById("mingtian").innerHTML; alert(mingtian); //弹出 明天是星期五
二、document.getElementsByTagName() 根据标签名获取元素节点,返回的是一个nodeList对象,可以遍历输出,也可以根据索引号选择其中一个。
<p id="jintian">今天是星期四</p> <p id="mingtian">明天是星期五</p> var p=document.getElementsByTagName("p")[0].innerHTML; alert(p); //今天是星期四 var p=document.getElementsByTagName("p"); for(var i=0;i<p.length;i++){ alert(p[i]); //分两次弹出 今天是星期四;明天是星期五; }
三、document.getElementsByClassName() 根据class获取元素节点 //ie 6 7 8不支持
<p id="jintian" class="jintian">今天是星期四</p> <p id="mingtian">明天是星期五</p> var p=document.getElementsByClassName("jintian")[0].innerHTML; alert(p); //今天是星期四
四、javascript中的css选择器
document.querySelector() //根据CSS选择器的规则,返回第一个匹配到的元素 document.querySelectorAll() //根据CSS选择器的规则,返回所有匹配到的元素 <div id="div1"> <p id="p1" class="class1"> 我是第一个P</p> <p id="p2" class="class2"> 我是第二个P</p> </div> window.onload = function () { var node = document.querySelector("#div1 > p"); alert(node.innerHTML); //输出 我是第一个P var node1 = document.querySelector(".class2"); alert(node1.innerHTML); //输出 我是第二个P var nodelist = document.querySelectorAll("p"); alert(nodelist[0].innerHTML + " - " + nodelist[1].innerHTML); //输出 我是第一个P - 我是第二个P }
五、文档结构和遍历
1、parentNode 获得该节点的父节点 //兼容性良好
<div id="div1"> <p id="jintian" class="jintian">今天是星期四</p> <p id="mingtian">明天是星期五</p> </div> window.onload=function(){ var jintian=document.getElementById("jintian"); console.log(jintian.parentNode.innerHTML); //输出 <p id="jintian" class="jintian">今天是星期四</p><p id="mingtian">明天是星期五</p> }
2、childNodes 获得指定节点的子节点 // ie 6 7 8获得指定元素的子元素节点 高级浏览器获得指定元素所有子节点,包括文本节点。 不推荐使用
<div id="div1"> <p id="jintian" class="jintian">今天是星期四</p> <p id="mingtian">明天是星期五</p> </div>var div1=document.getElementById("div1");
alert(div1.childNodes.length); //5 为什么是5而不是2呢,因为这个方法会把文本节点也算其中,也就是说0,2,4是文本节点。
3、children 获得指定元素的子元素节点 //兼容性良好
4、firstChild 获取该节点的第一个子节点 //ie 6 7 8获取指定节点的第一个子元素节点 高级浏览器获取第一个子节点,不排除文本节点
<div id="div1"> <p id="jintian" class="jintian">今天是星期四</p> <p id="mingtian">明天是星期五</p> </div> var div1=document.getElementById("div1"); console.log(div1.firstChild); //#text 第一个文本节点,也可以说是空格
兼容方法:
var 第一个子节点=节点.firstElementChild || 节点.firstChild;
5、lastChild 获取该节点的最后一个子节点 //ie 6 7 8获取元素的最后一个子元素节点 高级浏览器获取最后一个子节点,不排除文本节点
<div id="div1"> <p id="jintian" class="jintian">今天是星期四</p> <p id="mingtian">明天是星期五</p> </div> var div1=document.getElementById("div1"); console.log(div1.lastChild); //#text 最后一个文本节点,也可以说是空格
兼容方法:
var 最后一个子元素节点=节点.lastElementChild || 节点.lastChild;
6、nextsibling 获取该节点的下一个兄弟节点 //ie 6 7 8获得下一个元素节点 高级浏览器获得下一个节点,不排除文本节点
<div id="div1"> <p id="jintian" class="jintian">今天是星期四</p> <p id="mingtian">明天是星期五</p> </div> var p=document.getElementById("jintian"); console.log(p.nextSibling); //#text
兼容方法:
下一个兄弟节点=节点.nextElementSibling || 节点.nextSibling
7、previoursSibling 获取该节点的上一个兄弟节点 //ie 6 7 8获得上一个元素节点 高级浏览器获得上一个节点,不排除文本节点
<div id="div1"> <p id="jintian" class="jintian">今天是星期四</p> <p id="mingtian">明天是星期五</p> </div>var p=document.getElementById("mingtian");
console.log(p.previoursSibling); //#text
兼容方法:
上一个兄弟节点=节点.previousElementSibling || 节点.previousSibling
8、自定义siblings()方法
function siblings(idName){ var element=document.getElementById(idName); var eleList=element.parentNode.children; var eleArr=new Array(); for(var i=0;i<eleList.length;i++){ if(eleList[i]!==element){ eleArr.push(eleList[i]); } } return eleArr; }
9、nodeType 节点的类型 9代表Document节点,1代表Element节点,3代表Text节点,8代表Comment节点,11代表DocumentFragment节点
<div id="div1"> <p id="jintian" class="jintian">今天是星期四</p> <p id="mingtian">明天是星期五</p> </div> var div1=document.getElementById("div1"); var son=div1.childNodes; for(var i=0;i<son.length;i++){ console.log(son[i].nodeType); // 3 1 3 1 3 }
10、nodeValue text节点或Comment节点的文本内容
<div id="div1"> <!-- 这里是注释 --> </div> var div1=document.getElementById("div1"); var son=div1.childNodes; for(var i=0;i<son.length;i++){ console.log(son[i].nodeValue); 文本节点为空 所以打印出“” 这里是注释 “”
}
如果你想获取指定节点的文本:
指定元素节点.childNodes[0].nodeValue
11、nodeName 元素的标签名(如P,SPAN,#text(文本节点),DIV),以大写形式表示 //兼容性好
<p id="jintian" class="jintian">今天是星期四</p> var jintian=document.getElementById("jintian"); alert(jintian.nodeName); //P
12、childElementCount 子元素节点的个数 //ie 6 7 8不支持 高级浏览器支持
<div id="div1"> <p id="jintian" class="jintian">今天是星期四</p> <p id="mingtian">明天是星期五</p> </div> var div1=document.getElementById("div1"); console.log(div1.childElementCount); //2
替代方法:
var ul=document.getElementById("ul"); alert(ul.children.length);
六、javascript操作html属性
1、属性的读取,注意,有几个html属性名称在javascript中是保留字,因此会有些许不同,比如class,label标签中的for,相应的可以替换成className,htmlFor。
<p id="xu" class="xulinjun">my name is xu</p> var xu=document.getElementById("xu"); alert(xu.className); //xulinjun 如果此处写成xu.class 就会弹出undefined
2、属性的设置,此处同样注意保留字。
<img src="123.png" alt="" id="img"> var img=document.getElementById("img"); img.onclick=function(){ this.src="456.png"; //通过点击改变图片的路径,小图变大图 }
非标注html属性
3、getAttribute() 获取属性,不必在意保留字
<p id="jintian" class="xixi">今天是星期四</p> var jinian=document.getElementById("jintian"); alert(jintian.getAttribute("class")); //弹出xixi
4、setAttribute() 设置属性,不必在意保留字
<p id="jintian" class="xixi">今天是星期四</p> var jinian=document.getElementById("jintian"); jintian.setAttribute("class","lala"); alert(jintian.getAttribute("class")); //弹出lala
七、元素的内容
1、innerText 从起始位置到终止位置的内容, 但它去除Html标签 注意火狐浏览器不支持innerText
<div id="div1"> <p id="jintian">今天是星期四</p> <p id="mingtian">明天是星期五</p> </div> var div1=document.getElementById("div1"); console.log(div1.innerText); 今天是星期四 明天是星期五
2、innerHTML innerHTML与innerText的区别,就是对HTML代码的输出方式Text不会输出HTML代码
<div id="div1"> <p id="jintian">今天是星期四</p> <p id="mingtian">明天是星期五</p> </div> var div1=document.getElementById("div1"); console.log(div1.innerHTML); //<p id="jintian">今天是星期四</p> <p id="mingtian">明天是星期五</p>
八、创建、插入、删除节点
1、document.createTextNode() 创建一个文本节点
<p id="jintian">今天是星期四</p> var jintian=document.getElementById("jintian"); var newP=document.createTextNode("后天是星期六"); jintian.appendChild(newP); //今天是星期四后天是星期六
2、document.createElement 创建一个元素节点
<div id="div1"> <p id="jintian">今天是星期四</p> <p id="mingtian">明天是星期五</p> </div> var div1=document.getElementById("div1"); var newP=document.createElement("p"); newP.innerHTML="我就是一个新建的p"; div1.appendChild(newP); //现在html变成了 <div id="div1"> <p id="jintian">今天是星期四</p> <p id="mingtian">明天是星期五</p> <p>我就是一个新建的p</p> </div>
3、appendChild() 将一个节点插入到调用节点的最后面 实例如上
4、insertBefore() 接收两个参数,第一个为待插入的节点,第二个指明在哪个节点前面,如果不传入第二个参数,就像appendChild一样放在最后面,调用者也为父节点。
<div id="div1"> <p id="jintian">今天是星期四</p> <p id="mingtian">明天是星期五</p> </div> var div1=document.getElementById("div1"); var mingtian=document.getElementById("mingtian"); var newP=document.createElement("p"); newP.innerHTML="我就是一个新建的p"; div1.insertBefore(newP,mingtian); //现在html变成了 <div id="div1"> <p id="jintian">今天是星期四</p> <p>我就是一个新建的p</p>
<p id="mingtian">明天是星期五</p> </div>
5、自定义insertAfter
function insertAfter(newElement,targetElement){ var parent=targetElement.parentNode; if(parent.lastChild==targetElement){ parent.appendChild(newElement); }else{ parent.insertBefore(newElement,targetElement.nextSibling); } }
6、removeChild() 由父元素调用,删除一个子节点,注意是直接父元素调用,删除子节点才有效,删除孙子元素就没有效果了。
<div id="div1"> <p id="jintian">今天是星期四</p> <p id="mingtian">明天是星期五</p> </div> var div1=document.getElementById("div1"); var mingtian=document.getElementById("mingtian"); div1.removeChild(document.getElementById("mingtian")); //现在html变成了 <div id="div1"> <p id="jintian">今天是星期四</p> </div>
7、replaceChild() 用一个新节点替代一个旧节点 由父节点调用,接收两个参数,第一个为新节点,第二个为旧节点。
<div id="div1"> <p id="jintian">今天是星期四</p> <p id="mingtian">明天是星期五</p> </div> var div1=document.getElementById("div1"); var mingtian=document.getElementById("mingtian"); var newP=document.createElement("p"); newP.innerHTML="我就是一个新建的p"; div1.replaceChild(newP,mingtian); //现在结构变成了 <div id="div1"> <p id="jintian">今天是星期四</p> <p>我就是一个新建的p</p> </div>
九、javascript操作css
1、style 通过元素的style属性可以随意读取和设置元素的CSS样式
<p id="tianqi" style="background-color:yellowgreen;">今天天气不错啊~</p> var p=document.getElementById("tianqi"); console.log(p.style.backgroundColor); //rgb(154, 205, 50) p.style.backgroundColor="purple"; //背景颜色变成了紫色
注意:style只能获取行内样式。