js dom - 基本操作（增删改查）

最新推荐文章于 2022-08-02 11:08:37 发布

@红@旗下的小兵

最新推荐文章于 2022-08-02 11:08:37 发布

阅读量526

点赞数 1

分类专栏： ES5

本文链接：https://blog.csdn.net/qq_42778001/article/details/105940335

版权

ES5 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

以下展示了原型链的继承关系：

如: 在Node中定义的方法，它下边的所有文档及文档元素都可以调用

1、document.getElementByTagName()方法定义在 Document.prototype 上和 Elment.prototype 上

所以，下边选择元素可以这样写：

<div id="box">
    <div class="d">
        <span>345</span>
    </div>
    <span></span>
</div>
<script>
let div = document.getElementsByClassName('d')[0]
let r = div.getElementsByTagName('span')[0] // htmlElment上也可以使用此方法
console.log(r) // <span>345</span>
</script>

2、在HTMLDocument.prototype定义了一些常用的属性，其中body和head属性分别指body元素和head元素

// document相当于 HTMLDocument 的实例，所以根据原型链能访问到HTMLDocument
// 原型上的属性
document.body
document.head

3、在Document.prototype 上定义了documentElement属性，指代 <html>元素

document.documentElement // <html>··· ···</html>

增

增加节点

1、document.createElement 创建一个元素

let div = document.createElement('div')

2、document.createTextNode 创建文本节点

 let div = document.createTextNode('lxc') // 创建文本节点

3、document.createComment 创建注释节点

 let div = document.createComment('this is comment') // 创建注释节点

插入节点

1、DOM.appendChild( text ) 插入节点 - 相当于剪切

<div id="box"></div>
<script>
let div = document.getElementById('box')
let text = document.createTextNode('吕星辰')
div.appendChild(text)
div.appendChild(text) // 相当于替换或者是剪切，而不是叠加
</script>

2、DOM.insertBefore( span, i ) 在dom中插入span标签，且在 i 标签之前

<div id="box">
    <i class="i"></i>
</div>
<script>
    let div = document.getElementById('box')
    let span = document.createElement('span')
    let i = document.getElementsByClassName('i')[0]
    div.insertBefore(span, i)
</script>

以下是Element节点的一些属性

3、DOM.innerHTML 在dom中插入元素、文本，会直接覆盖掉原先的，直接写 DOM.innerHTML 是取值，有等号为赋值

<div id="box">
    <i class="i"></i>
</div>
<script>
    let div = document.getElementById('box')
    div.innerHTML = 'lxc'
</script>

也可以追加：DOM.innerHTML + = '123'

也可以插入元素：

<div id="box"></div>
<script>
    let div = document.getElementById('box')
    div.innerHTML = "<span style='color: #fff; padding: 10px; background: brown;'>123</span>"
</script>

4、DOM.innerText 在dom中添加文本、或者取文本，添加文本时，相当于覆盖原先内容。

老版本火狐不兼容！

Element节点的一些方法

5、ele.setAttribute ( 'class', 'value' ) 设置元素的属性( 也可以设置系统没有的属性 )

6、ele.getAttribute( 'class' ) 获取元素的属性值

补充：

className 可以获取元素的class值，或修改class值

<div class="son">123</div>
<script>
    let div = document.getElementsByClassName('son')[0]
    div.className = 'lxc'
    console.log(div.className) // 'lxc'
</script>

删除节点

1、parent.removeChild(dom) 删除dom中的子节点, 返回的是删除的那个子元素, 相当于剪切（只能删除直接子节点）

<div id="box">
    <i class="i"></i>
    <span class="span"></span>
</div>
<script>
    let div = document.getElementById('box')
    let i = document.getElementsByTagName('i')[0]
    let span = document.getElementsByClassName('span')[0]
    div.removeChild(i)
</script>

2、self.remove() 自己删除自己, 无返回结果，直接销毁了

<div id="box">
    <i class="i"></i>
</div>
<script>
    let div = document.getElementById('box')
    let i = document.getElementsByTagName('i')[0]
    i.remove()
</script>

@红@旗下的小兵

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js dom - 基本操作（增删改查）

以下展示了原型链的继承关系：如: 在Node中定义的方法，它下边的所有文档及文档元素都可以调用1、document.getElementByTagName()方法及定义在Document.prototype 上和Elment.prototype上所以，下边选择元素可以这样写：<div id="box"> <div class="...
复制链接

扫一扫