节点的获取
<script> var div = document.getElementById("box");//返回指定标签 var div = document.getElementsByClassName("box")[0];//返回html标签元素数组 var div = document.getElementsByTagName("div")[0];//返回html标签元素数组 </script>
访问关系:父节点、兄弟节点、单个子节点
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="box1"> <div id="box2">我是box2的内容</div> <div id="box3">我是box3的内容</div> </div> <script> var parent = document.getElementById("box2").parentNode;//返回父节点元素 var nextEle = document.getElementById("box2").nextSibling;//返回下一个节点(包括空文档和换行节点) var nextEle = document.getElementById("box2").nextElementSibling;//返回下一个节点(不包括空文档和换行节点) var previouEle = document.getElementById("box3").previousSibling;//返回上一个节点(包括空文档和换行节点) var previouEle = document.getElementById("box3").previousElementSibling;//返回上一个节点(不包括空文档和换行节点) var firstEle = document.getElementById("box1").firstChild;//返回子节点中的第一个节点(包括空文档和换行节点) var firstEle = document.getElementById("box1").firstElementChild;//返回子节点中的第一个节点(不包括空文档和换行节点) //var lastEle = document.getElementById("box1").lastChild;//返回子节点中的最后一个节点(包括空文档和换行节点) var lastEle = document.getElementById("box1").lastElementChild;//返回子节点中的最后一个节点(不包括空文档和换行节点) var childEles = document.getElementById("box1").childNodes;//返回所有子节点的集合(包括空文档和换行节点) var childEles = document.getElementById("box1").children;//返回所有子节点的集合(不包括空文档和换行节点) console.log(childEles[0]); </script> </body> </html>
随意得到兄弟节点
<script> function siblings(elm) { var a = []; var p = elm.parentNode.children; for (var i = 0, pl = p.length; i < pl; i++) { if (p[i] !== elm) a.push(p[i]); } return a; } </script>
节点属性:nodeType、nodeValue、nodeName
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="box">你好</div> <script> var ele = document.getElementById("box"); var att = ele.getAttributeNode("id");//获得属性节点 var txt = ele.firstChild; console.log(ele.nodeType);//1 console.log(att.nodeType);//2 console.log(txt.nodeType);//3 console.log(ele.nodeName);//div console.log(att.nodeName);//id console.log(txt.nodeName);//#text console.log(ele.nodeValue);//null console.log(att.nodeValue);//box console.log(txt.nodeValue);//你好 </script> </body> </html>
节点操作:追加、插入、删除、复制、替换
- 追加,插入,删除的动作都是移动节点的操作
- appendChild:父节点调用此方法,返回被移动的节点,实现效果是将一个节点移动到父节点的子节最后
- insertBefore:父节点调用此方法,返回被移动的节点,实现效果是将一个节点移动到某个子节点之前
- removeChild:父节点调用此方法,返回追移除的节点,实现效果是将一个节点移除
- 杀死自己:子节点.parentNode之后找到父节点,用父节点调用removeChild方法,将自己移除,返回被移除节点
- replaceChild:父节点调用,返回被替换的节点对象
- cloneNode:任意节点对象调用,返回一个复制的副本,参数为true表示深度克隆(什么都有),参数为false表示浅度克隆,没有innerText
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="box1"> <div id="box2">我是box2的内容</div> <div id="box3">我是box3的内容</div> </div> <script> var newDiv = document.createElement("div"); newDiv.innerHTML = "我是newDiv的内容"; var box3 = document.getElementById("box3"); document.getElementById("box1").appendChild(newDiv); //在父节点中最后插入 document.getElementById("box1").insertBefore(newDiv, box3);//在参考节点之前插入子节点 document.getElementById("box1").removeChild(box3);//父节点移除指定子节点 document.getElementById("box2").parentNode.removeChild(document.getElementById("box2"));//自己移除自己,一般在不知道父节点的情况下使用 document.getElementById("box1").replaceChild(newDiv, box3);//新的子节点替换老的子节点 console.log(document.getElementById("box2").cloneNode(true));//复制节点 true深度复制 false浅度复制 </script> </body> </html>
节点属性:获取、设置、删除
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="box1"> <div id="box2">我是box2的内容</div> <div id="box3">我是box3的内容</div> </div> <a href="#123" id="a" class="a">123</a> <script> var newDiv = document.createElement("div"); var box3 = document.getElementById("box3"); var a = document.getElementById("a"); console.log(a.getAttribute("href"));//节点属性的获取 a.setAttribute("href", "#456");//节点属性的设置 a.removeAttribute("class");//节点属性的移除 </script> </body> </html>
事件的绑定:1、函数绑定;2、匿名函数;3、行内绑定
<script> var div = document.getElementById("box");//返回指定标签 div.onclick = fn; function fn() { alert(1); } </script>
<script> var div = document.getElementById("box"); div.onclick = function () { alert(1); } div.onclick = fn; </script>
<div class="box" id="box" onclick="fn()"></div>
window.onload
- html和js是同步加载的,js若放在html之前容易报错
- onload可以预防报错,它是在页面或图像加载完成后触发的事件
value、innerHTML、innerText
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input id="inp1" type="text" value="我是inpput的value属性值" /> <div id="box1"> 我是box1的内容 <div id="box2">我是box2的内容</div> </div> <div id="box3"> 我是box1的内容 <div id="box4">我是box2的内容</div> </div> <script> //value:标签的value属性。 console.log(document.getElementById("inp1").value); //innerHTML:获取双闭合标签里面的内容。(识别标签) console.log(document.getElementById("box1").innerHTML); document.getElementById("box1").innerHTML = "<h1>我是innerHTML</h1>"; //innerText:获取双闭合标签里面的内容。(不识别标签)(老版本的火狐用textContent) console.log(document.getElementById("box3").innerText); document.getElementById("box3").innerText = "<h1>我是innerText</h1>"; </script> </body> </html>
练习(一)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { padding: 0; margin: 0; } .top-banner { background-color: pink; height:60px; } .w { 1000px; margin: 10px auto; position: relative; } img { 1000px; height: 60px; background-color: blue; } a { position: absolute; top: 5px; right: 5px; 20px; height:20px; color:#fff; background-color:black; font:700 14px/20px "simsum"; text-align:center; text-decoration:none; } .hide{ display:none; } </style> </head> <body> <div class="top-banner" id="topBanner"> <div class="w"> <img src="#" /> <a href="#" id="closeBanner">╳</a> </div> </div> <script> var closeBanner = document.getElementById("closeBanner"); var topBanner = document.getElementById("topBanner"); closeBanner.onclick = function () { //topBanner.className += " hide"; topBanner.style.display = "none"; } </script> </body> </html>
<head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload = function () { var img = document.getElementById("box"); img.onmouseover = function () { img.src = "image/jd2.png"; } var img = document.getElementById("box"); img.onmouseout = function () { this.src = "image/jd1.png"; } </script> </head> <body> <img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;" /> </body> </html>
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> function fn() { pic.src = "456.jpg"; } window.onload = function () { var btn = document.getElementById("btn"); var pic = document.getElementById("pic"); //btn.onclick = function () { // pic.src = "456.jpg"; // return false; //组织a链接跳转 //} } </script> </head> <body> <a href="http://www.baidu.com" id="btn" onclick="fn(); return false;">切换</a> <img src="123.jpg" id="pic" style="400px;"/> </body> </html>
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> button{ margin:10px 0; } div{ 100px; height:100px; background-color:red; } </style> </head> <body> <button id="btn">隐藏</button> <div id="box">你好吗?</div> <script> var btn = document.getElementById("btn"); var box = document.getElementById("box"); btn.onclick = function () { if (btn.innerHTML == "隐藏") { box.style.display = "none"; btn.innerHTML = "显示"; } else { box.style.display = "block"; btn.innerHTML = "隐藏"; } } </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { font-family: "Helvetica", "Arial", serif; color: #333; background-color: #ccc; margin: 1em 10%; } h1 { color: #333; background-color: transparent; } a { color: #c60; background-color: transparent; font-weight: bold; text-decoration: none; } ul { padding: 0; } li { float: left; padding: 1em; list-style: none; } #imagegallery { list-style: none; } #imagegallery li { margin: 0px 20px 20px 0px; padding: 0px; display: inline; } #imagegallery li a img { border: 0; } </style> </head> <body> <h2> 美女画廊 </h2> <a href="#">注册</a> <ul id="imagegallery"> <li> <a href="image/1.jpg" title="美女A"> <img src="image/1-small.jpg" width="100" alt="美女1" /> </a> </li> <li> <a href="image/2.jpg" title="美女B"> <img src="image/2-small.jpg" width="100" alt="美女2" /> </a> </li> <li> <a href="image/3.jpg" title="美女C"> <img src="image/3-small.jpg" width="100" alt="美女3" /> </a> </li> <li> <a href="image/4.jpg" title="美女D"> <img src="image/4-small.jpg" width="100" alt="美女4" /> </a> </li> </ul> <div style="clear:both"></div> <img id="image" src="image/placeholder.png" width="450px" /> <p id="des">选择一个图片</p> <script> var ul = document.getElementById("imagegallery"); var aArr = ul.getElementsByTagName("a"); var img = document.getElementById("image"); var des = document.getElementById("des"); for (var i = 0; i < aArr.length; i++) { aArr[i].onclick = function () { img.src = this.href;//aArr[i].herf会出错,因为函数第一次加载注册的时候i停留在4,而且加载只加载函数名不加载函数体 des.innerHTML = this.title; return false; } } </script> </body> </html>