浏览器DOM操作-白红宇

浏览器DOM操作

阅读量：4958 次

发布时间：2019-06-12

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

HTML

- innerHTML:内部HTML，content
；- outerHTML:外部HTML，
    
     content
     
    
；- innerText:不会返回隐藏元素的文本,受 CSS 样式的影响,它会触发重排(reflow);IE11及以下,不仅会移除当前元素的子节点，而且还会永久性地破坏所有后代文本节点- textContent,会获取所有元素的内容,包括 css内容;对比innerText,不会引起重排;兼容性: IE9开始支持- outerText:outerText 赋值时会把整个标签一起赋值掉;非标准属性,不要在生产环境中使用!

jQuery的html()会调用innerHTML()来操作,但同时也会 catch 异常，然后用.empty(),.append()来重新操作.这是因为IE8中有些元素的.innerHTML是只读的

Node 节点

Node是一个接口，许多DOM类型从这个接口继承,常用如元素节点,文本节点,属性节点.

每个node对象均有nodeValue,nodeType属性:

nodeValue
- 元素节点值是 undefined 或 null
- 文本节点值是文本本身
- 属性节点值是属性值,使用 getAttribute()

常用nodeType
- 1 Element 元素节点
- 2 Attr 属性节点
- 3 Text 文本节点
- 4 CDATASection
- 9 Document DOM 树的根节点
- 11 DocumentFragment

可以用在遍历DOM树时使用节点类型过滤

var allChildren = document.getElementById('inhere');for(var i = 0; i < allChildren.length; i++) {    if(allChildren[i].nodeType == 1 && allChildren[i].hasAttribute('someattr')) {        // …        break;    }}

NodeList是一个节点的集合,具有以下特征:

实时性
由 Node.childNodes 和 document.querySelectorAll 返回,大多数情况下是一个实时的集合,当文档节点变化时,NodeList对象也会变化.因此当使用完该对象后,避免保留节点引用是好的编程习惯.在遍历节点集合的时候应避免对DOM进行操作影响遍历过程;需要注意的是例外情况:document.querySelectorAll 返回的是静态集合.

节点集合与数组
NodeList 继承自 NodeList.prototype,而数组继承自Array.prototype,因此要想使用数组方法有很多方法:
- 使用原型链把Array.prototype 上的方法添加到 NodeList.prototype, 但是扩展 DOM对象的原型链是很危险
- 数组原型方法使用 call将 NodeList 作为this参数传递给原生方法,不保证所有浏览器均兼容
- 将 Nodelist 转化为数组:Array.prototype.slice.call(NodeList),可以简单使用[].slice.call(NodeList) 兼容性:IE9+

HTMLCollection
- 很明显HTMLCollection只是元素节点的集合,不同的是元素节点集合是实时的,而Nodelist不总是实时的
- Node.childNodes返回的是NodeList,而node.children返回的是HTMLCollection

常用API

节点操作

- element.hasChildNodes 是否拥有子节点

- element.children 返回节点元素集合

- element.childNodes 返回子节点集合

- element.parentNode 返回父节点

- element.cloneNode(deep)克隆节点,包括所有属性及属性值(包括 onclick,但不包括 addEventListener,οnclick=fn这种动态绑定)

---

属性和样式操作

- element.getAttributeNode() 获取指定属性的节点

- element.setAttribute() 为节点设置属性,若属性不存在多数情况下返回null,某些返回空字符串,所以判断是否有指定属性,应使用 hasAttribute

- element.hasAttribute() 判断是否有指定属性

- element.style 获取或者设置样式

- element.className 获取或者设置属性

---

创建,删除和替换节点

- document.createElement() 创建元素节点

- document.createTextNode() 创建一个文本节点

- document.createDocumentFragment() 创建DocumentFragment节点

- element.appendChild() 向节点子节点列表的末尾添加新的子节点

- element.removeChild() 删除节点;删除自己时,需要用 parentNode.removeChild()

- document.replaceChild() 替换元素节点

- document.replaceData() 替换文本节点() 不如直接操作nodeValue

---

获取节点

- document.getElementById() 根据id返回一个 Element 对象,没有返回 null

- document.getElementsByClassName

- document.getElementsByTagName(name) 返回一个 HTMLCollection;在 WebKit 内核的浏览器中返回一个 NodeList

- document.getElementsByName(name) name:是元素的 name 属性的值;返回一个 NodeList 集合

- document.querySelector

- 使用深度优先先序遍历文档的节点

- 如果没有找到匹配元素,则返回 null

- 返回第一个匹配的节点

- document.querySellectorAll 返回一个 NodeList,并且是静态集合

高效遍历 DOM

使用nodeType过滤

使用XPath

遍历时尽量不对 DOM 操作

var allPara = document.getElementsByTagName('p');for(var i = 0; i < allPara.length; i++) {    allPara[i].appendChild(document.createTextNode(i));}→var allPara = document.getElementsByTagName('p');var collectTemp = [];for(var i = 0; i < allPara.length; i++) {    collectTemp[collectTemp.length] = allPara[i];}for(i = 0; i < collectTemp.length; i++) {    collectTemp[i].appendChild(document.createTextNode(i));}collectTemp = null;

Repaint and reflow

插入大量内容避免重绘和回流

createDocumentFragment

var docFragm = document.createDocumentFragment();var elem, contents;for(var i = 0; i < textlist.length; i++) {    elem = document.createElement('p');    contents = document.createTextNode(textlist[i]);    elem.appendChild(contents);    docFragm.appendChild(elem);}document.body.appendChild(docFragm);

cloneNode

var original = document.getElementById('container');var cloned = original.cloneNode(true);cloned.setAttribute('width', '50%');var elem, contents;for(var i = 0; i < textlist.length; i++) {    elem = document.createElement('p');    contents = document.createTextNode(textlist[i]);    elem.appendChild(contents);    cloned.appendChild(elem);}original.parentNode.replaceChild(cloned, original);

invisible

var posElem = document.getElementById('animation');posElem.style.display = 'none';posElem.appendChild(newNodes);posElem.style.width = '10em';// Other changes…posElem.style.display = 'block';// block 块级元素

Taking measurements
Taking measurements will force it to reflow
浏览器也会cache 操作,一次 reflow.但是进行测量操作时为了获取准确数据,会强制进行 reflow

style 样式操作

在已知样式的情况下设置 class

div {    background: #ddd;    color: #000;    border: 1px solid #000;}div.highlight {    background: #333;    color: #fff;    border: 1px solid #00f;}…document.getElementById('mainelement').className = 'highlight';

define a new style attribute for the element
兼容性:

IE的 setAttribute 不支持设置'style'(另外设置"class"属性,IE为"className")

一些老浏览器,包括Opera 8,不支持 cssText

如果只修改一些style,可以拼接,但是IE6/7/8中 cssText 返回值少了分号

var posElem = document.getElementById('animation');var newStyle = 'background: ' + newBack + ';' +    'color: ' + newColor + ';' +    'border: ' + newBorder + ';';if(typeof(posElem.style.cssText) != 'undefined') {    posElem.style.cssText = newStyle;} else {    posElem.setAttribute('style', newStyle);}

DOM事件

event 对象

stopPropagation() 取消冒泡,IE 不支持

cancelBubble = true 取消冒泡(IE)

preventDefault() 取消默认行为 IE 不支持

cancelable = false 表示没有默认行为 IE 不支持

returnValue = false 取消默认行为(IE)

javascript 的 return false 只会阻止默认行为,

jQuery
- return 则既阻止默认行为又防止冒泡
- stopPropagation 取消冒泡,兼容IE
- preventDefault 取消默认行为,兼容 IE

// 取消冒泡和默认行为function cancelHandler(event){      if(window.event){        window.event.cancelBubble = true;        window.event.eturnValue = false;    }else{        event.stopPropagation();        event.preventDefault();    }  return false;    // jquery    return false;  }  /*只取消冒泡*/function stopHandler(event)      window.event?window.event.cancelBubble=true:event.stopPropagation();          // jquery        event.stopPropagation();}/*只取消默认行为*/function cancleDefault(event){    return false;    // with jquery    event.preventDefault();}

转载于:https://www.cnblogs.com/zhangduo/p/6792156.html

你可能感兴趣的文章