Javascript——DOM学习笔记
Posted 前端之路
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript——DOM学习笔记相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DOM基础</title>
<style type="text/css">
ol li ol li{font-size: 13px;}
</style>
</head>
<body >
<h2>DOM类型</h2>
<ol>
<li><h4>Node类型:</h4>
<ol>
<li>Node.firstChild=Node.childNodes[0],第一个子节点</li>
<li>Node.lastChild=Node.childNodes[Node.childNodes.length-1]最后一个子节点</li>
<li>Node.ownerDocument,返回的是文档对象document</li>
<li>Node.nextSibling,下一兄弟节点</li>
<li>Node.previousSibling,前一个兄弟节点</li>
<li>Node.parentNode,父节点</li>
<li>Node.appendChild,在元素末尾添加一个子节点</li>
<li>Node.insertBefore(),在节点前添加子节点</li>
<li>Node.repalceChild,替换子节点</li>
<li>Node.removeChild,删除子节点</li>
<li>Node.cloneNode(),克隆子节点，当cloneNode(true)，克隆整个子树，false只复制当前节点</li>
</ol>
</li>
<li><h4>Element类型:元素节点，就是标签名,nodeType为1 ，nodeName(tagName也输出标签名，输出都为大写)为标签名，nodeValue值为null</h4>
<ol><h5>查找元素</h5>
<li>getElementById方法()：只返回第一次出现的id，除IE8及以下浏览器区，都分大小写，IE7及以下版本会返回name值与ID相同的表单元素如果该值出现在给定id元素之前</li>
<li>getElementByTagName方法()，返回HTMLCollection数组集合：HTMLCollection中还包含一个nameItem()方法，可以获取到HTMLCollection中name值相同的元素；getElementByTagName("*")能获取到所有元素(IE8及以下还能获取到注释)</li>
<li>getElementByClassName方法()，返回HTMLCollection数组集合</li>
<li>getElementByName()，返回HTMLCollection数组集合，可以用这个方法获取到单选按钮的值，也具有nameItem()方法</li>
</ol>
<ol><h5>获取属性：var div=document.getElementById("id");</h5>
<li>id: div.id</li>
<li>class: div.className</li>
<li>style: div.style(.color/fontSize.....)</li>
<li>title: div.title</li>
<li>备注: 非自定义的特性才能以这种属性方式操作 （IE8及以下允许）</li>
</ol>
<ol><h5>操作特性的三个方法：可以操作自定义特性</h5>
<li>获取：div.getAttribute(特性名可自定义)</li>
<li>设置：div.setAttribute(特性名,值)，通过这个方法设置的特性会统一转化为小写。</li>
<li>删除：div.removeAttribute(特性名,值)，IE6及以前版本不支持</li>
<li>备注:IE7及以前版本，通过get/setAttribute获取设置class和style特性没有任何效果。style返回对象，class可以通过className来设置获取，同时，IE7及以前版本获取事件返回字符串，其他浏览器返回函数</li>
</ol>
<ol><h5>attributes属性:包含NamedNodeMap集合</h5>
<li>getNamedItem():div.attributes.getNamedItem("id").nodeValue==div.attributes["id"].nodeValue==div.getAttribute("id")</li>
<li>removeNamedItem():div.attributes.removeNamedItem("id")</li>
<li>setNamedItem()</li>
<li>item(pos)</li>
<li>备注:保存了所有特性用来做特性遍历可以派上用场，不同浏览器输出顺序会不同，且IE7及之前版本会输出所有特性，所以需要使用div.attributes[i].specifie返回true来确定是否设置了这个属性</li>
</ol>
<ol><li>创建节点:createElement();IE7及以下浏览器在创建input单选按钮以及button-reset按钮时回出现兼容问题，此时我们需要在创建过程中就将属性值写出其中。即：createElement("<button type=\"reset \"></button>" );</li></ol>
</li>
<li><h4>Attr属性节点：nodeType为2，nodeName为特性名，nodeValue为特性值</h4>
<ol>
<li>attr=document.createAttribute(属性名("id/lang/title......"))创建属性</li>
<li>attr.value=value,属性赋值</li>
<li>element.setAttributeNode(attr),添加属性到节点</li>
<li>element.getAttributeNode(属性名).value获取属性的值</li>
<li>element.removeAttributeNode(属性名)删除属性</li>
</ol>
</li>
<li><h4>文本节点：就是标签内的纯文本nodeType为3,nodeName为#text,nodeValue为文本内容</h4>
<ol>
<li>创建文本节点：document.createTextNode()</li>
<li>链接文本节点: div.normalValue(),同一元素节点下的同胞文本节点变为同一文本节点</li>
<li>分割文本节点: splitText，文本节点.splitText（分割的位子） </li>
<li>为文本节点赋值text.nodeValue="<div> text</div>",会直接输出"<div> text</div>"文本，不会转为HTML文本</li>
</ol>
</li>
<li><h4>document类型:nodeType为9,nodeName为#document,nodeValue为null</h4>
<ol>
<li>document类型只有一个子节点<html>，可以通过document.documentElement</li>
<li>document.body可以直接获取body元素</li>
<li>document.title获取文档标题</li>
<li>document.URL地址栏中的URL</li>
<li>document.domian 获得域名:域名可以松散但不可以再紧绷</li>
<li>document.referrer 获取源页面的地址</li>
<li>特殊集合:document.anchors——文档中所有带name值得<a>元素<br/>document.forms所有<form>元素<br/>document.images所有<img>元素<br/>document.links所有带有href属性的<a>元素</li>
<li>document.write/writeln(输出会一个"\n"),若输出script标签，则结尾标签</script>需要分开写才能与输出的对应--"</scr"+"ipt>"</li>
</ol>
</li>
<li><h4>DocumentFragment类型：文档片段。nodeType为11,nodeName为#document-fragment,nodeValue为null</h4>
<ol>
<li>document.createDocumentFragment(无参数)来创建文档片段，fragment.appendChild来添加子节点，执行someNode.appendChild(fragment)操作fragment所有子节点都将被转移且被删除</li>
</ol>
</li>
<li><h4>DOM拓展</h4>
<h5>混合模式(backCompat)和标准模式(CSS1Compat)</h5>
<ol>
<li>document.compactMode进行判断</li>
<li>IE又引入documentMode；5为IE5混杂模式，7为IE7混合模式，8为IE8标准模式</li>
</ol>
<h5>滚动</h5>
<ol>
<li>div/body.scrollIntoView()窗口会尽可能的滚动到自身顶部与元素顶部对齐</li>
</ol>
<h5>contain()：firefox不支持，某节点是否包含另一节点</h5>
<ol>
<li>例:document.documentElement.contain(document.body);//true</li>
<li>firefox:document.documentElement.compareDocumentPosition(document.body)//返回20（4+16）</li>
</ol>
<h5>操作内容</h5>
<ol>
<li>innerText:操作所有后代节点中的文本内容，过滤标签(firefox不支持，使用textContent代替)<br/>
innerText中输入的标签会被转译输出并不会成为标签<br/>
兼容判断：
function(e){typeof e.textContent=="string"? e.textContent:e.innerText}
</li>
<li>innerHTML:可以按照指定创建DOM子树<br/>除去IE8及以下插入script标签不会被执行(IE也必须在之前添加作用域内元素)<br/>
添加style元素也有兼容问题：<br/>
//针对opera、Firefox和IE<br/>
div.innerHTML="_<style type="text/css">body{background-color:yellow;}</style>"<br/>
div.removeChild(div.firstChild);<br/>
//针对safari和Chrome需要再将style加入head标签中<br/>
document.getElementByTagName("head")[0].appendChild(div.firstChild);<br/>
IE8提供了window.toStaticHTML()为HTML字符串做无害处理
</li>
<li>outText和outHTML都在原有基础上再包含当前元素进行处理</li>
</ol>
</li>
<li>
<h5>性能与内存</h5>
<ol>
<li>在删除替换innerHTML(子树)时，先删除子树中带有的事件处理程序，元素若绑定事件，在元素删除后，元素与处理程序之间的绑定依然存在于内存中若该情况出现频繁，内存使用会显著增加</li>
<li>尽量少的访问到DOM，这样效率很低，将必要的数据缓存下来，再一次性赋值给DOM</li>
<li>对复用的结构进行封装</li>
</ol>
</li>
</ol>
<h4>备注：DOM操作必须等待HTML元素加载完毕，才可以获取可以设置window.onload=function(){//这里操作}</h2>
</body>
</html>
以上是关于Javascript——DOM学习笔记的主要内容，如果未能解决你的问题，请参考以下文章