DOM对象： documentobjectmodel 文档对象模型, dom 是 W3C 的标准， DOM 定义了访问 HTML 和 XML 的标准，中立与平台和语言的接口，它允许脚本动态的访问文本的内容、结构、样式 HTML -页面结构，
- document object model文档对象模型,dom是W3C的标准，
- DOM定义了访问HTML和XML的标准，中立与平台和语言的接口，它允许脚本动态的访问文本的内容、结构、样式
- HTML-页面结构，CSS-页面样式，JAVASCRIPT-页面行为操作
- DOM是打通HTML,CSS,JS之间壁垒的一个工具
<div title="我是属性">我是文本</div>
DOM的三个节点，节点都是对象，div是元素节点，title="我是属性"是属性节点，"我是文本"是文本节点
查找元素节点的方法 document.getElementById("btn") 属性 tagName,获取标签名 innerHtml,标签之间的所有内容 innerHtml = "<h1>hello</h1>"; 也包括 HTML中的一些属性， id, btn.id = "btn1"; btn.id或者 btn[id] className,获取class的时候不能直接用 class，用 className， btn.className = "box1"; title, style: btn.style.width = "300px"; 如果属性中有 -，比如 background-Color要写成 backgroundColor 问题：用 js只能找到行间的样式，如果现在头部 STYLE或者引用 css，则无法找到属性的返回值。 获取当前有效样式（火狐/谷歌/ safari支持）： getComputedStyle(元素节点)["样式类型"]，IE：元素节点. currentStyle["样式类型"]; getComputedStyle(btn)["width"]; 浏览器兼容性构造函数封装
function getStyle(el,styleStr){ return el.currentStyle ? el.currentStyle[styleStr] : getComputedStyle(el)[styleStr];//兼容IE }node.getElementByTagName();
var div1 = node.getElementByTagName("div") var ul1 = div1.getElementByTagName("ul");//获取div下面的所有ul的标签，获取的是一个数组，ul1[i]或者ul1.item(i);也可以document.getElementByName("hello") getElementByName查找 node节点下所有相同名称的节点，不支持从某个节点开始查找， Name属性一般只有文本输入的节点才会有。 document.getElementByClassName("hello") 查找 node节点下所有相同名称的节点，支持从某个节点开始查找，在低版本的IE浏览器不支持，可以封装一个 IE兼容函数
function elementByClassName(parent,classStr){ var child = parent.getElementByTagName("*");//*代表所有类型的节点 var getE = [];//用来记录符合的元素节点数组 for(i=0;i<child.length;i++){ if(child[i].className == classStr){ getE.push(child[i]); } } return getE; }
set/getAttribute(); 都是操作元素节点的某个属性，
var div1 = document.getElementById("div1"); div1.className; div1.getAttribute("class");//两个是一样的,但是一个是通过className,一个是通过class div1.className = "sdf"; div1.setAttribute("class","dsf");
不同点： div1.xxx = "yyy"; 无法赋值， div1.setAttribute("xxx","yyy"); 是可行的，在浏览器控制台可以查看 如果 div本身行中写入 xxx="yy",用 div1.xxx属性访问是访问不了的。 getAttribute是可以的 removeAttribute(); 删除属性， div1.removeAttribute("title"); childNodes; 当前元素节点内的所有子节点。 nodeName nodeType nodeValue 元素节点 元素名称 1 null 属性节点 属性名称 2 属性值 文本节点 #text 3 文本内容 共同有的属性， nodeName, nodeValue, nodeType
<div id="div1"><em>ff</em>文本<strong>sdfd</strong></div>
var oDiv = document.getElementById("div1"); alert(oDiv.childNodes[0].nodeName);//返回EM alert(oDiv.childNodes[0].nodeType);//返回1 alert(oDiv.childNodes[0].nodeValue);//返回null alert(oDiv.childNodes[1].nodeName);//返回#text alert(oDiv.childNodes[1].nodeType);//返回3 alert(oDiv.childNodes[1].nodeValue);//返回 文本
firstChild 第一个子节点
alert(oDiv.firstChild.nodeName);//返回EM
lastChild 最后一个子节点
alert(oDiv.lastChild.nodeName);//返回strong
删除空白节点 两种格式排列 1. <div id="div1"><em>ff</em>文本<strong>sdfd</strong></div> 2.
<div id="div1"> <em>ff</em> 文本 <strong>sdfd</strong> </div>
这样用 oDiv.childNodes.length是不同的上面返回3,下面返回5，包括回车，换行，tab键，空格键，都会产生子节点，虽然我们看不见这个键，但它们都是字符。 识别空白节点，正则表达式 /^\s+$/.test();返回 true false /^\s+$/.test(" "); 封装函数，识别掉空白节点
function defineSpaceNode (nodes){ var result = [];//先定义一个数组，将结果返回 for (i = 0; i < nodes.length; i++){//遍历节点 if(nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)){//如果节点即是文本节点又是空白字符返回true continue;//结束本次循环，开始下次循环 } result.push(nodes[i]);//如果结果false，那么将结果加入数组返回 } return result; }
封装函数，识别删除空白节点，/^\s+$/ [1,2,3,4,4,3,2] [1,2,3,4,3,2] 为何需要倒序删除，因为当删除一个元素之后，后面一个元素就顶替了前面这个元素的下标，就会被直接忽略判断。
function removeSpaceNode (parent){ var nodes = parent.childNodes; for (i = nodes.length - 1; i <= 0; i--){//需要倒序删除 if(nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)){ parent.removeChildNodes(nodes[i]); } } } var oDiv = document.getElementById("div1"); var divNodes = defineSpaceNode(oDiv.childNodes);//识别掉空白节点赋值给divNodes alert(divNodes.length);//返回3
ownerDocument; 属性返回该节点的文档对象根节点，返回的对象相当于 document, alert(oDiv.ownerDocument == document); 返回 true parentNode 属性返回该节点的父节点 <em></em><div></div><strong></strong> oDiv.parentNode.nodeName; 返回 body previousSibling 属性返回该节点的前一个同级节点 em nextSibling 属性返回该节点的后一个同级节点 strong
attributes属性节点 <div id = "div1" title = "dd" name = "bbb" class = "aa"></div> 返回该节点的属性节点的【集合】,1,不重复，2，无序。这和数组不一样 oDiv.attribute; 返回 [object NamedNodeMap] oDiv.attributes.length; 返回个数4 getNamedItem(); oDiv.attributes.getNamedItem("id"); 返回 object Attr 或者 oDiv.attribute["id"]; oDiv.attributes["id"].nodeName;返回id oDiv.attributes["id"].nodeType;返回2，属性节点 oDiv.attributes["id"].nodeValue;返回div1 creatElement();创建一个元素节点 格式:document.creatElement("node");
var nodeSpan = document.createElement("span");//创建一个span节点 var oText = document.createTextNode("文本内容");//创建一个文本节点 nodeSpan.appendChild(oText);//span带上了文本 oDiv.appendChild(nodespan);//将span插入最后
封装一个带文本的节点
function creatElementWithTxt(el,txt){ var nodeSpan = document.createElement(el);//创建一个span节点 var oText = document.createTextNode(txt);//创建一个文本节点 return nodeSpan.appendChild(oText);//span带上了文本 }
document.write();会将原有内容覆盖 appendChild();将新节点移到节点末尾 格式:parent.appendChild(node); creatTextNode();创建一个文本节点 格式:document.creatTextNode(txt); insertBefore();在前面插入一个新节点 格式：父节点parent.insertBefore(newNode，oldNode);
<div><em></em><strong></strong></div>
var oSpan = creatElementWithTxt(span,"文本"); var oEm = document.getElementByTagName("em")[0];//找到要插入的第一个元素节点 oEm.parentNode.insertBefore(oSpan,oEm);//在em之前插入一个带文本的span
封装函数，插入到元素节点后边
function insertAfter(newNode,oldNode){ var parent = oldNode.parentNode; if(oldNode == parent.lastChild){如果是最后一个节点 parent.appendChild(newnode); }else{ parent.insertBefore(newNode,oldNode.nextSibling); } }
repalceChild(); 格式:parent.raplaceChild(newNode，oldNode); cloneNode(); 格式:node.cloneNode();参数：true(复制元素节点中的innerHtml),默认false 对象是唯一的，如果用insertBefore();节点会移动， var node = oDiv.cloneNode();克隆一个节点，默认不克隆节点中的文本节点，然后用一些方法添加到节点中 var node = oDiv.cloneNode(true); removeChild(); 格式:parent.removeChild(node); 兼容IE获取className相应的节点的封装函数
function elementByClassName(parent,classStr){ var child = parent.getElementsByTagName("*");//*代表所有类型的节点 var getE = [];//用来记录符合的元素节点数组 for(i=0;i<child.length;i++){ if(child[i].className == classStr){//遍历节点的className查找需要的 getE.push(child[i]); } } return getE; }
id,tagName,name,class简化操作封装函数，获取上述节点 name=
function $(elStr){ switch(elStr[0]){ case "#"://判断是否是ID return document.getElementById(elStr.substring(1)); break; case "."://className return elementByClassName(document,elStr.substring(1)); break; default: if(elStr.substring(0,5) == "name="){//name return document.getElementsByName(elStr.substring(5)); } else{ return document.getElementsByTagName(elStr);//tagName } break; } }
<div name = "divName">111</div>
<div class = "divClass">222</div>
<div class = "divClass">333</div>
<div id = "divId">444</div>
window.onload = function(){ alert($("#divId").innerHTML); alert($(".divClass").length); alert($(".divClass")[1].innerHTML); alert($("name=divName")[0].innerHTML); alert($("div").length); alert($("div")[1].className); }