Javascript——DOM学习笔记
DOM类型
-
Node类型:
- Node.firstChild=Node.childNodes[0],第一个子节点
- Node.lastChild=Node.childNodes[Node.childNodes.length-1]最后一个子节点
- Node.ownerDocument,返回的是文档对象document
- Node.nextSibling,下一兄弟节点
- Node.previousSibling,前一个兄弟节点
- Node.parentNode,父节点
- Node.appendChild,在元素末尾添加一个子节点
- Node.insertBefore(),在节点前添加子节点
- Node.repalceChild,替换子节点
- Node.removeChild,删除子节点
- Node.cloneNode(),克隆子节点，当cloneNode(true)，克隆整个子树，false只复制当前节点
-
Element类型:元素节点，就是标签名,nodeType为1 ，nodeName(tagName也输出标签名，输出都为大写)为标签名，nodeValue值为null
查找元素
- getElementById方法()：只返回第一次出现的id，除IE8及以下浏览器区，都分大小写，IE7及以下版本会返回name值与ID相同的表单元素如果该值出现在给定id元素之前
- getElementByTagName方法()，返回HTMLCollection数组集合：HTMLCollection中还包含一个nameItem()方法，可以获取到HTMLCollection中name值相同的元素；getElementByTagName("*")能获取到所有元素(IE8及以下还能获取到注释)
- getElementByClassName方法()，返回HTMLCollection数组集合
- getElementByName()，返回HTMLCollection数组集合，可以用这个方法获取到单选按钮的值，也具有nameItem()方法
获取属性：var div=document.getElementById("id");
- id: div.id
- class: div.className
- style: div.style(.color/fontSize.....)
- title: div.title
- 备注: 非自定义的特性才能以这种属性方式操作 （IE8及以下允许）
操作特性的三个方法：可以操作自定义特性
- 获取：div.getAttribute(特性名可自定义)
- 设置：div.setAttribute(特性名,值)，通过这个方法设置的特性会统一转化为小写。
- 删除：div.removeAttribute(特性名,值)，IE6及以前版本不支持
- 备注:IE7及以前版本，通过get/setAttribute获取设置class和style特性没有任何效果。style返回对象，class可以通过className来设置获取，同时，IE7及以前版本获取事件返回字符串，其他浏览器返回函数
attributes属性:包含NamedNodeMap集合
- getNamedItem():div.attributes.getNamedItem("id").nodeValue==div.attributes["id"].nodeValue==div.getAttribute("id")
- removeNamedItem():div.attributes.removeNamedItem("id")
- setNamedItem()
- item(pos)
- 备注:保存了所有特性用来做特性遍历可以派上用场，不同浏览器输出顺序会不同，且IE7及之前版本会输出所有特性，所以需要使用div.attributes[i].specifie返回true来确定是否设置了这个属性
- 创建节点:createElement();IE7及以下浏览器在创建input单选按钮以及button-reset按钮时回出现兼容问题，此时我们需要在创建过程中就将属性值写出其中。即：createElement("<button type=\"reset \"></button>" );
-
Attr属性节点：nodeType为2，nodeName为特性名，nodeValue为特性值
- attr=document.createAttribute(属性名("id/lang/title......"))创建属性
- attr.value=value,属性赋值
- element.setAttributeNode(attr),添加属性到节点
- element.getAttributeNode(属性名).value获取属性的值
- element.removeAttributeNode(属性名)删除属性
-
文本节点：就是标签内的纯文本nodeType为3,nodeName为#text,nodeValue为文本内容
- 创建文本节点：document.createTextNode()
- 链接文本节点: div.normalValue(),同一元素节点下的同胞文本节点变为同一文本节点
- 分割文本节点: splitText，文本节点.splitText（分割的位子）
- 为文本节点赋值text.nodeValue="<div> text</div>",会直接输出"<div> text</div>"文本，不会转为HTML文本
-
document类型:nodeType为9,nodeName为#document,nodeValue为null
- document类型只有一个子节点<html>，可以通过document.documentElement
- document.body可以直接获取body元素
- document.title获取文档标题
- document.URL地址栏中的URL
- document.domian 获得域名:域名可以松散但不可以再紧绷
- document.referrer 获取源页面的地址
- 特殊集合:document.anchors——文档中所有带name值得<a>元素
document.forms所有<form>元素
document.images所有<img>元素
document.links所有带有href属性的<a>元素 - document.write/writeln(输出会一个"\n"),若输出script标签，则结尾标签</script>需要分开写才能与输出的对应--"</scr"+"ipt>"
-
DocumentFragment类型：文档片段。nodeType为11,nodeName为#document-fragment,nodeValue为null
- document.createDocumentFragment(无参数)来创建文档片段，fragment.appendChild来添加子节点，执行someNode.appendChild(fragment)操作fragment所有子节点都将被转移且被删除
-
DOM拓展
混合模式(backCompat)和标准模式(CSS1Compat)
- document.compactMode进行判断
- IE又引入documentMode；5为IE5混杂模式，7为IE7混合模式，8为IE8标准模式
滚动
- div/body.scrollIntoView()窗口会尽可能的滚动到自身顶部与元素顶部对齐
children
- div.children,可以忽略空白节点
contain()：firefox不支持(3.6)，某节点是否包含另一节点
- 例:document.documentElement.contain(document.body);//true
- firefox:document.documentElement.compareDocumentPosition(document.body)//返回20（4+16）
操作内容
- innerText:操作所有后代节点中的文本内容，过滤标签(firefox不支持，使用textContent代替)
innerText中输入的标签会被转译输出并不会成为标签
兼容判断： function(e){typeof e.textContent=="string"? e.textContent:e.innerText} - innerHTML:可以按照指定创建DOM子树
除去IE8及以下插入script标签不会被执行(IE也必须在之前添加作用域内元素)
添加style元素也有兼容问题：
//针对opera、Firefox和IE
div.innerHTML="_<style type="text/css">body{}</style>"
div.removeChild(div.firstChild);
//针对safari和Chrome需要再将style加入head标签中
document.getElementByTagName("head")[0].appendChild(div.firstChild);
IE8提供了window.toStaticHTML()为HTML字符串做无害处理 - outText和outHTML都在原有基础上再包含当前元素进行处理
-
DOM操作技术
-
动态脚本
function(url){ var script=document.createElement("script"); script.type="text/javascript"; script.src=url;// document.body.appendChild(script); } function (code){ var script=document.createElement("script"); script.type="text/javascript"; try(){ script.append(document.createTextNode(code)) }catch{script.text=code;//兼容IE8及以下} } -
动态样式
function loadStyle(url){ var lk=document.createElement("link"); lk.rel="stylesheet"; lk.type="text/css"; lk.href=url; document.getElementsByTagName("head")[0].appendChild(lk); } loadStyle("style.css"); function loadStyleString(code){ var sl=document.createElement("style"); sl.type="text/css"; try{ sl.appendChild(document.createTextNode(code))} catch(e){ sl.styleSheet.cssText=code;//IE8及以下才有用，其他都报错} document.getElementsByTagName("head")[0].appendChild(sl); } loadStyleString("body{ background:yellow}"); loadStyleString("body{ background:green66}");
-
-
操作表格
- rows:tbody.insertRow(pos)插入行,deleteRow(pos)删除行
- rows:tbody.insertCell(pos)插入列,deleteCell(pos)删除列
-
css拓展
- 获取计算后的元素大小:
var style= window.getComputedStyle?window.getComputedStyle(box,null):null||box.currentStyle alert(style.width)//IE在没有设置值得时候返回auto； - 获取元素实际大小(加上内边距):
div.clientWidth; div.clientHeight在没有设置滚动条和内边距的情况下（IE8及以下会理解为0） -
滚动内容的元素大小
div.scrollWidth; div.scrollHeight; //IE浏览器在指定高度下，获取scrollHeight会理解为获取有效的内容高度 //如果文本溢出没有加滚动条，不同浏览器也不太兼容 -
包括边框、内边距的元素大小
div.offsetWidth; div.offsetHeight; //增加外边框(margin)和滚动条大小不变，但浏览器兼容很好 -
获取周边元素大小
- clientLeft,clientTop左边康和上边框大小
- offsetLeft,offsetTop当前元素相对父元素的位置 //建议父元素加上定位后使用，兼容更好
- scrollLeft,scrollTop,溢出添加滚动条之后的位置
- 获取计算后的元素大小:
-
性能与内存
- 在删除替换innerHTML(子树)时，先删除子树中带有的事件处理程序，元素若绑定事件，在元素删除后，元素与处理程序之间的绑定依然存在于内存中若该情况出现频繁，内存使用会显著增加
- 尽量少的访问到DOM，这样效率很低，将必要的数据缓存下来，再一次性赋值给DOM
- 对复用的结构进行封装
