DOM-4 【utils/待讲评】节点创建删除、元素属性设置获取、节点属性

最新推荐文章于 2021-11-05 15:56:05 发布

Stephy_Yy

最新推荐文章于 2021-11-05 15:56:05 发布

阅读量148

点赞数

分类专栏：系统学习 # DOM

本文链接：https://blog.csdn.net/weixin_43503511/article/details/117484222

版权

讲评

节点创建

Document.prototype ← document.createElement('div')
document.createTextNode('xxx') // 创建文本节点
document.createComment('xxx') // 创建注释节点

增加/剪切子节点

Node.prototype ← node.appendChild(node)
总是在父元素的最后增加（类似push）
同时也能剪切（对于存在的节点/DOM元素），可用于移动位置，绝不能写字符串

插入insertBefore

Node.prototype
c.insertBefore(a, b) 在父级c节点下的子节点b前插入a节点，新的在前
最后插的总是紧靠着旧的节点

<body>
    <div>
        <p class="firstP">666</p>
    </div>

    <script>
        var div = document.getElementsByTagName('div')[0]
        var fP = document.getElementsByClassName('firstP')[0]
        var oP = document.createElement('p')
        oP.innerHTML = '222'
        div.insertBefore(oP, fP)
        var sP = document.createElement('p')
        sP.innerHTML = '333'
        div.insertBefore(sP, fP)
    </script>
</body>

在这里插入图片描述

删除节点 removeChild

Node.prototype
父节点.removeChild(子节点) // 返回被删除的节点
元素是由构造函数实例化创建的，dom对象存到了内存中，删除节点并没有释放内存

删除释放节点remove

节点自身.remove()
返回undefined
内存也释放了

节点替换

父节点.replaceChild(新, 旧)

innerHTML innerText

原型	属性
Element.prototype	innerHTML
HTMLElement.prototype	innerHTML 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.childNodes
    if (arr.length === 0) {

最低0.47元/天解锁文章

Stephy_Yy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM-4 【utils/待讲评】节点创建删除、元素属性设置获取、节点属性

节点创建Document.prototype ← document.createElement('div')document.createTextNode('xxx') // 创建文本节点document.createComment('xxx') // 创建注释节点增加/剪切子节点Node.prototype ← node.appendChild(node)总是在父元素的最后增加（类似push）同时也能剪切（对于存在的节点/DOM元素），可用于移动位置，绝不能写字符串插入inse
复制链接

扫一扫