注册公司名称查询网站,搜狗seo优化,馆陶网站建设,网站怎么做动态图片讲评
节点创建
Document.prototype ← document.createElement(div)document.createTextNode(xxx) // 创建文本节点document.createComment(xxx) // 创建注释节点
增加/剪切子节点
Node.prototype ← node.appendChild(node)总是在父元素的最后增加#xff08;类似pushdiv)document.createTextNode(xxx) // 创建文本节点document.createComment(xxx) // 创建注释节点
增加/剪切子节点
Node.prototype ← node.appendChild(node)总是在父元素的最后增加类似push同时也能剪切对于存在的节点/DOM元素可用于移动位置绝不能写字符串
插入insertBefore
Node.prototypec.insertBefore(a, b) 在父级c节点下的子节点b前插入a节点新的在前最后插的总是紧靠着旧的节点
bodydivp classfirstP666/p/divscriptvar div document.getElementsByTagName(div)[0]var fP document.getElementsByClassName(firstP)[0]var oP document.createElement(p)oP.innerHTML 222div.insertBefore(oP, fP)var sP document.createElement(p)sP.innerHTML 333div.insertBefore(sP, fP)/script
/body删除节点 removeChild
Node.prototype父节点.removeChild(子节点) // 返回被删除的节点元素是由构造函数实例化创建的dom对象存到了内存中删除节点并没有释放内存
删除释放节点remove
节点自身.remove()返回undefined内存也释放了
节点替换
父节点.replaceChild(新, 旧)
innerHTML innerText
原型属性Element.prototypeinnerHTMLHTMLElement.prototypeinnerHTML innerText
innerHTML可读写 追加赋值可写文本 or HTML字符串innerText会过滤标签innerText赋值为标签也会将标签转换为字符实体依然是字符innerText在老版本的火狐对应textConent但老版本的IE不支持textContent 元素节点方法
div.setAttribute(id,box)div.getAttribute(class)
自定义属性
HTML5中增加data-*属性自定义的属性通过节点.dataset来管理dataset在移动端兼容PC端IE9及以下不兼容无此属性
创建文档碎片
document.createDocumentFragment()给浏览器渲染引擎减负减少计算位置/回流当oDiv还没有在节点树里的时候append但结果多了一个div节点而文档碎片是节点但不在dom树上存在内存中nodeType12不会引起页面的回流 字符串的性能更好
练习
原型上编程 hasChildren 判断父元素有没有子元素节点
Element.prototype.hasChildren function () {var arr this.childNodesif (arr.length 0) {return false} else {for (var i 0; i arr.length; i) {if (arr[i].nodeType 1) {return true}}return false}
}
var div document.getElementsByTagName(div)[0]
var h1 document.getElementsByTagName(h1)[0]
console.log(div.hasChildren())
console.log(h1.hasChildren())原型上编程 寻找兄弟元素节点 参数为正找之后第n个参数为负找之前第n个参数0返回自己
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydivh1/h1p/pa href/aspan/span/divscriptElement.prototype.findSibling function () {var index arguments[0] || 0if (!index) {return this} else {var times Math.abs(index)var node thisfor (var i 0; i times; i) {node findFn(node, index)}return node}}function findFn(node, index) {if (index 0) {return node.nextElementSibling} else {return node.previousElementSibling}}var h1 document.getElementsByTagName(h1)[0]var found h1.findSibling(3)var a document.getElementsByTagName(a)[0]var found2 a.findSibling(-2)console.log(found)console.log(found2)/script
/body/html用js创建文档碎片
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydiv idbox/divscriptvar div document.getElementsByTagName(div)[0],oUl document.createElement(ul);oUl.className listvar oDivFragment document.createDocumentFragment(div)for (var i 0; i 5; i) {var oLi document.createElement(li)oLi.className list-itemoLi.innerText i 1oDivFragment.appendChild(oLi)}oUl.appendChild(oDivFragment)div.appendChild(oUl)/script
/body/html遍历一个父级元素下面所有的子元素节点
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydiv classgrandfatherp/pdivh1/h1span/spandiva href/ah2/h2/div/div/divscriptElement.prototype.getAllChildren function () {var arr this.childNodesvar eleArr []getChildren(arr, eleArr)return eleArr}function getChildren(arr, eleArr) {for (var i 0; i arr.length; i) {if (arr[i].nodeType 1) {eleArr.push(arr[i])if (arr[i].hasChildNodes()) {getChildren(arr[i].childNodes, eleArr)}}}}var oGF document.getElementsByClassName(grandfather)[0]var children oGF.getAllChildren()console.log(children)/script
/body/html原型上封装insertAfter 用insertBefore实现 子元素逆序
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydiv classgrandfatherh11/h1span2/spandiv3/divp4/p/divscriptElement.prototype.myReverse function () {var arr this.childNodes,children []for (var i 0; i arr.length; i) {var ele arr[i]if (ele.nodeType 1) {children.push(ele)}}for (var j children.length - 1; j 0; j--) {var e children[j]this.appendChild(e)}}var oGF document.getElementsByClassName(grandfather)[0]/script
/body/html18-1 innerHTML
Element.prototype上的属性对于特殊符号获取到的是字符实体document.body.innerHTML / document.documentElement.innerHTML(不能直接在document上用此属性)会删除元素内原有的内容 outerHTML - 替换掉包含父元素的所有内容获取dom元素字符串并用pre将字符实体转成符号 设置innerHTML时
将字符串解析为HTML文档用documentFragment将这个文档结构变成DOM节点原本父节点上的所有内容都会被替换成这个节点性能问题慢安全问题HTML5和现代的新的浏览器会组织通过innerHTML嵌入脚本的程序执行 插入纯文本时使用Node.textContent更好只会将文本插入到元素内部去不会解析为HTML文档追innerHTML会破坏原先的DOM应用
innerText 纯文本设置时和textContent效果相同尽量使用textContent innerText会忽略非标签内容比如style、换行 推荐做法用外层盒子包裹
