DOM核心操作

约定不等于承诺〃 2023-06-29 10:53 68阅读 0赞

# 前言 #

JavaScript主要是由三部分组成：ECMAScript、DOM、BOM，今天我们一起来学习一下JS中DOM的核心操作吧。

# 是什么 #

DOM即Document Object Model（文档对象模型），可以使用JS来操作HTML。

# 创建元素 #

##   方式一：`document.write` ##

创建方式：

document.write('我是后来的<p>我是更后的</p>')

最终效果：  
  ![在这里插入图片描述][20200112150730758.png]

##   方式二：`innerHTML` ##

创建方式：

var box = document.getElementById('box');
    box.innerHTML = '新内容<p>新标签</p>'

最终效果：  
  ![在这里插入图片描述][20200112151119839.png]

##   方式三：`createElement` ##

创建方式：

var div = document.createElement('div');
    document.body.appendChild(div)

最终效果：  
  ![在这里插入图片描述][20200112151320396.png]

##   三种方式区分： ##

> document.write：如果实在页面加载完毕后，此时通过这种方式创建元素，那么页面上存在的内容就都被干掉了  
> innerHTML：采取数组形式拼接的时候，效率更高，但是结构稍微复杂  
> createElement：创建多个元素效率稍微低一点，但是结构更为清晰

# 操作元素 #

##   一、增 ##

1.`appendChild`

node.appendChild(child)  // 后面追加元素

2.`insertBefore`

node.insertBefore(child, 指定元素)  // 在执行元素之前插

代码示例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]

##   二、删 ##

node.removeChild(child)   // 移除指定元素

代码示例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 1]

##   三、改 ##

1.修改元素属性：src、href、title

img.src = 'openEye.png'

2.修改普通元素内容：innerHTML、innerText

var box = document.getElementById('box');
    box.innerHTML = '新内容<p>新标签</p>'

3.修改表单样式：value、type、disabled

li.innerHTML = text.value;
    input.type = 'password'
    btn.disable = true

4.修改元素样式：style、className

img.style.display = 'none'
    img.className=' '    // 在CSS中定义的类名

##   四、查 ##

1.DOM提供的API：getElementById、getElementsByTagName

<div id='box'></div>
    var box = document.getElementById('box');
    var box2 = document.getElementsByTagName('div')

2.H5提供的新方法：querySelector、querySelectorAll

var ul = document.querySelector('ul');
    var li = document.querySelectorAll('li')

3.利用节点操作获取元素：parentNode、children、previousElementSibling、nextElementSibling

> parentNode：返回的是离元素最近的父级节点 如果找不到就返回null  
> children：获取所有的子元素节点  
> previousElementSibling：上一个兄弟元素节点  
> nextElementSibling：下一个兄弟元素节点

# 自定义属性操作 #

1.`setAttribute`

>  设置自定义属性：setAttribute(“属性的名字”,“属性的值”);

2.`getAttribute`

> 获取自定义属性的值：getAttribute(“属性的名字”);

3.`removeAttribute`

> 移除自定义属性：removeAttribute(“属性的名字”);

# 事件操作 #

1.事件源.事件类型 = 事件处理程序

btn.onclick = function() {
    	// do something
    }

2.addEventListener

document.addEventListener('click ', function() {
        // do something
    })

[20200112150730758.png]: https://img-blog.csdnimg.cn/20200112150730758.png
[20200112151119839.png]: https://img-blog.csdnimg.cn/20200112151119839.png
[20200112151320396.png]: https://img-blog.csdnimg.cn/20200112151320396.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200112153019123.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020011215322193.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx,size_16,color_FFFFFF,t_70