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

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

js dom - 基本操作（增删改查）_原型链

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

 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

js dom - 基本操作（增删改查）_原型链_03

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>

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

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>

js dom - 基本操作（增删改查）_原型链_05

以下是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>

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

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

js dom - 基本操作（增删改查）_子节点_07

也可以插入元素：

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

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

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

 

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>

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

 

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>

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