Javascript——DOM学习笔记-白红宇

Javascript——DOM学习笔记

阅读量：6002 次

发布时间：2019-06-20

本文共 6006 字，大约阅读时间需要 20 分钟。

DOM类型

Node类型:
1. Node.firstChild=Node.childNodes[0],第一个子节点
2. Node.lastChild=Node.childNodes[Node.childNodes.length-1]最后一个子节点
3. Node.ownerDocument,返回的是文档对象document
4. Node.nextSibling,下一兄弟节点
5. Node.previousSibling,前一个兄弟节点
6. Node.parentNode,父节点
7. Node.appendChild,在元素末尾添加一个子节点
8. Node.insertBefore(),在节点前添加子节点
9. Node.repalceChild,替换子节点
10. Node.removeChild,删除子节点
11. Node.cloneNode(),克隆子节点，当cloneNode(true)，克隆整个子树，false只复制当前节点

Element类型:元素节点，就是标签名,nodeType为1 ，nodeName(tagName也输出标签名，输出都为大写)为标签名，nodeValue值为null

查找元素
1. getElementById方法()：只返回第一次出现的id，除IE8及以下浏览器区，都分大小写，IE7及以下版本会返回name值与ID相同的表单元素如果该值出现在给定id元素之前
2. getElementByTagName方法()，返回HTMLCollection数组集合：HTMLCollection中还包含一个nameItem()方法，可以获取到HTMLCollection中name值相同的元素；getElementByTagName("*")能获取到所有元素(IE8及以下还能获取到注释)
3. getElementByClassName方法()，返回HTMLCollection数组集合
4. getElementByName()，返回HTMLCollection数组集合，可以用这个方法获取到单选按钮的值，也具有nameItem()方法
获取属性：var div=document.getElementById("id");
1. id: div.id
2. class: div.className
3. style: div.style(.color/fontSize.....)
4. title: div.title
5. 备注: 非自定义的特性才能以这种属性方式操作（IE8及以下允许）
操作特性的三个方法：可以操作自定义特性
1. 获取：div.getAttribute(特性名可自定义)
2. 设置：div.setAttribute(特性名,值)，通过这个方法设置的特性会统一转化为小写。
3. 删除：div.removeAttribute(特性名,值)，IE6及以前版本不支持
4. 备注:IE7及以前版本，通过get/setAttribute获取设置class和style特性没有任何效果。style返回对象，class可以通过className来设置获取，同时，IE7及以前版本获取事件返回字符串，其他浏览器返回函数
attributes属性:包含NamedNodeMap集合
1. getNamedItem():div.attributes.getNamedItem("id").nodeValue==div.attributes["id"].nodeValue==div.getAttribute("id")
2. removeNamedItem():div.attributes.removeNamedItem("id")
3. setNamedItem()
4. item(pos)
5. 备注:保存了所有特性用来做特性遍历可以派上用场，不同浏览器输出顺序会不同，且IE7及之前版本会输出所有特性，所以需要使用div.attributes[i].specifie返回true来确定是否设置了这个属性
1. 创建节点:createElement();IE7及以下浏览器在创建input单选按钮以及button-reset按钮时回出现兼容问题，此时我们需要在创建过程中就将属性值写出其中。即：createElement("<button type=\"reset \"></button>" );

Attr属性节点：nodeType为2，nodeName为特性名，nodeValue为特性值
1. attr=document.createAttribute(属性名("id/lang/title......"))创建属性
2. attr.value=value,属性赋值
3. element.setAttributeNode(attr),添加属性到节点
4. element.getAttributeNode(属性名).value获取属性的值
5. element.removeAttributeNode(属性名)删除属性

文本节点：就是标签内的纯文本nodeType为3,nodeName为#text,nodeValue为文本内容
1. 创建文本节点：document.createTextNode()
2. 链接文本节点: div.normalValue(),同一元素节点下的同胞文本节点变为同一文本节点
3. 分割文本节点: splitText，文本节点.splitText（分割的位子）
4. 为文本节点赋值text.nodeValue="<div> text</div>",会直接输出"<div> text</div>"文本，不会转为HTML文本

document类型:nodeType为9,nodeName为#document,nodeValue为null
1. document类型只有一个子节点<html>，可以通过document.documentElement
2. document.body可以直接获取body元素
3. document.title获取文档标题
4. document.URL地址栏中的URL
5. document.domian 获得域名:域名可以松散但不可以再紧绷
6. document.referrer 获取源页面的地址
7. 特殊集合:document.anchors——文档中所有带name值得<a>元素
  document.forms所有<form>元素
  document.images所有<img>元素
  document.links所有带有href属性的<a>元素
8. document.write/writeln(输出会一个"\n"),若输出script标签，则结尾标签</script>需要分开写才能与输出的对应--"</scr"+"ipt>"

DocumentFragment类型：文档片段。nodeType为11,nodeName为#document-fragment,nodeValue为null
1. document.createDocumentFragment(无参数)来创建文档片段，fragment.appendChild来添加子节点，执行someNode.appendChild(fragment)操作fragment所有子节点都将被转移且被删除

DOM拓展

混合模式(backCompat)和标准模式(CSS1Compat)
1. document.compactMode进行判断
2. IE又引入documentMode；5为IE5混杂模式，7为IE7混合模式，8为IE8标准模式
滚动
1. div/body.scrollIntoView()窗口会尽可能的滚动到自身顶部与元素顶部对齐
children
1. div.children,可以忽略空白节点
contain()：firefox不支持(3.6)，某节点是否包含另一节点
1. 例:document.documentElement.contain(document.body);//true
2. firefox:document.documentElement.compareDocumentPosition(document.body)//返回20（4+16）
操作内容
1. innerText:操作所有后代节点中的文本内容，过滤标签(firefox不支持，使用textContent代替)
  innerText中输入的标签会被转译输出并不会成为标签
  兼容判断： function(e){typeof e.textContent=="string"? e.textContent:e.innerText}
2. 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字符串做无害处理
3. 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}");

操作表格
1. rows:tbody.insertRow(pos)插入行,deleteRow(pos)删除行
2. 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)和滚动条大小不变，但浏览器兼容很好

获取周边元素大小
1. clientLeft,clientTop左边康和上边框大小
2. offsetLeft,offsetTop当前元素相对父元素的位置 //建议父元素加上定位后使用，兼容更好
3. scrollLeft,scrollTop,溢出添加滚动条之后的位置

性能与内存
1. 在删除替换innerHTML(子树)时，先删除子树中带有的事件处理程序，元素若绑定事件，在元素删除后，元素与处理程序之间的绑定依然存在于内存中若该情况出现频繁，内存使用会显著增加
2. 尽量少的访问到DOM，这样效率很低，将必要的数据缓存下来，再一次性赋值给DOM
3. 对复用的结构进行封装