<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> .child2{ width:300px; height:auto;} .child5{color:Red;} </style> </head> <body> <div id="father" class="father"> <div id="child1" class="child1">child1</div> <div id="child2" class="child2">child2</div> <div id="child3" class="child3" mark="mark" style="width:200px;">child3</div> </div> <ul> <li></li> <li></li> <li></li> </ul> <img src="444444.png" alt="" style="width:200px; height:200px;"/> <img src="444444.png" alt="" style="width:200px; height:200px;"/> <img src="444444.png" alt="" style="width:200px; height:200px;"/> </body> <script type="text/javascript"> //(1)nodeType 节点 // 节点包括12种属性 // 1 元素节点 // 2 属性 // 3 文本 // 8 注释 // 9 文档 var father = document.getElementById("father"); if(father.nodeType==1){//兼容所有浏览器 console.log("father is a element"); } //nodeName 标签名 if(father.nodeType==1){ console.log("nodeName:"+father.nodeName); console.log("nodeValue："+father.nodeValue); console.log("className:"+father.className); } //(2)节点关系 每个节点都有个childNodes属性，其中保存着NodeList对象 //childNodes var child1 = father.childNodes[0]; if(child1!=null){ console.log("child1:"+child1.className);//ie下正常 chrome firefox下显示undefined } //firstChild var firstChild = father.firstChild; if(firstChild!=null){ console.log("firstChild:" + firstChild.className); //ie下正常 chrome firefox下显示undefined } //lastChild var lastChild = father.lastChild; if(lastChild!=null){ console.log("lastChild:" + lastChild.className); //ie下正常 chrome firefox下显示undefined } //nextSibling var child1Next = child1.nextSibling; if(child1Next!=null){ console.log("child1Next:" + child1Next.className); //ie下正常 chrome firefox下显示正常 } //child1NextPre var child1NextPre = child1Next.previousSibling; //hasChildNodes() 是否具有子节点 console.log("hasChildNodes:" + father.hasChildNodes()); //appendChild 不会添加，只会更换位置 //father.appendChild(child1Next); //question1 className 在ie下显示正常，在chrome firefox先显示不正常 因为使用childNodes 在chrome firefox下回出现很多空的节点 //例如 enter回车键，也会产生节点 //ie下 father只有2个childnode //chrome firefox下有5个childnode //0 : 回车 //1 : child1 //2 : 回车 //3 : child2 //4 : 回车 //解决方案 将回车 空格等等节点去掉 function getNewNodes(obj) { var newNode = []; var childnodes = obj.childNodes; for (var n in childnodes) { if (childnodes[n].nodeType == 1) {//如果为节点元素，则push进数组 newNode.push(childnodes[n]); } } return newNode; } console.log(getNewNodes(father).toString()); console.log(getNewNodes(father)[0].className) //parentNode 父节点 var parentNode = getNewNodes(father)[0].parentNode; console.log(parentNode.className); //insertBefore 接收2个参数，如果第二个参数为null,则作用和appendChild一样，如果不为null，则将第一个参数节点插到第二个参数节点的前面 var a = getNewNodes(father)[0]; var b = getNewNodes(father)[1]; var c = getNewNodes(father)[2]; father.insertBefore(c, a); //replaceChild(newNode,oldNode) //removeChild(node) //区分浏览器 function browserName() { var name = navigator.userAgent; if (name.toLowerCase().indexOf("firefox") !=-1) { return "firefox"; } if (name.toLowerCase().indexOf("msie") != -1) { return "ie"; } if (name.toLowerCase().indexOf("chrome") != -1) { return "chrome"; } if (name.toLowerCase().indexOf("opera") != -1) { return "opera"; } } console.log("浏览器：" + browserName()); //document 类型 //document 是 HTMLDocument的一个实例，表示整个html页面 //document对象是window对象的一个属性 //nodeType 为9 ，nodeName 为#document nodeValue为null ownerDocument为null // documentElement // var html = document.childNodes; for (var k in html) { if (html[k].nodeType == 1) { console.log(html[k].nodeName); } } //console.log(html); var db = document.body; var originalTitle = document.title; document.title = "Fuck you"; var url = document.URL; console.log(url); var domain = document.domain; console.log(domain); var reffer = document.referrer; //document. //查找元素 getElementById() getElementsByTagName() var imgs = document.getElementsByTagName("img"); console.log(imgs.length); console.log(imgs[0].src); var allElement = document.getElementsByTagName("*"); for (var k in allElement) { console.log(allElement[k]); } //getElementsByName() //document.anchors; document.applets; document.forms; document.links; //document.write;document.writeln的区别是writein会换行，我测试的时候出现的是空格 document.write("dd,"); document.writeln("dddd"); document.write("dd"); //dd,dddd dd //element 类型 //nodeType 为 1 //parentNode 可能为Document 或者Element //html 元素 // id title lang dir className 属性可以直接显示出来 var divId = getNewNodes(father)[0].id;//兼容 var divClassName = getNewNodes(father)[0].className;//兼容 console.log(divId + "," + divClassName); divId = getNewNodes(father)[0].getAttribute("id");//兼容 divClassName = getNewNodes(father)[0].getAttribute("className");//注意，不兼容的写法 console.log(divId + divClassName); //在Ie7下获取不到className的值 //所以标准的兼容的写法还是直接写.className var mark = getNewNodes(father)[0].getAttribute("mark"); console.log("mark:" + mark); //兼容 //setAttribute() getNewNodes(father)[0].setAttribute("mark", "mark1"); //removeAttribute() ie6不支持 //css var div = getNewNodes(father)[0];//样式潜入 //console.log("嵌入"+div.style.width); div = getNewNodes(father)[2]; console.log(div.className + div.style.width); //样式内联 //console.log(div.currentStyle.width); //IE //console.log(window.getComputedStyle(div, null).getPropertyValue("width")); function getRealStyle(obj, styleName) { // var element = document.getElementById(id); var realStyle = null; if (obj.currentStyle) realStyle = obj.currentStyle[styleName]; else if (window.getComputedStyle) realStyle = window.getComputedStyle(obj, null)[styleName]; return realStyle; } console.log("兼容：" + getRealStyle(div, "width")); //createElement 创建元素 var newDiv = document.createElement("div"); newDiv.setAttribute("id", "child4"); newDiv.setAttribute("mark", "mark4"); newDiv.className = "child4"; newDiv.innerHTML = "child4"; father.appendChild(newDiv); var div2 = document.createElement("div"); div2.className = "child5"; div2.innerHTML = "child5"; father.appendChild(div2); var div3 =document.createElement("table"); var html1 = "<tr><td>dddd</td></tr>"; div3.innerHTML = html1; father.appendChild(div3); //text 类型 nodeType 3 //comment 注释类型 nodeType 8 </script> </html>