一初始化项目

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>index</title>
    <style>
    .box {
       width: 100px;
       height: 100px;
       background-color: gray; 
    }
    .red {
        background-color: red;
    }
    </style>
</head>
<body>

    <div class="box" id="box">id = box.</div>
    <div class="box" id="content">id = content.</div>

    <script>
        // 这里写js
    </script>
</body>
</html>

二操作 DOM

获取 dom 元素

// 根据 标签名 获取 dom
const boxDoms = document.getElementsByTagName('div')

// 根据 id  获取 dom
const boxDom = document.getElementById('box')

// 根据 id 获取 dom
const boxDom = document.querySelector('#box')

// 根据 class 获取第一个 dom
const boxDom = document.querySelector('.box')

// 根据 class 获取所有 dom 
const boxDoms = document.querySelectorAll('.box')

更新 dom 元素文本内容

boxDom.innerHTML = 'innerHTML 更新的内容';

更新 dom 元素样式

// 设置 style 属性
boxDom.style.backgroundColor = 'green';

// 设置 class 值
boxDom.className = 'box red';

给 dom 元素绑定事件

boxDom.onclick = (e) => {
    console.info('boxDom click .')
};

向页面插入新的 dom 元素

boxDom.innerHTML = `<div>
    我是 innerHTML 插入的 div 标签的内容
</div>`

给新插入的 dom 元素添加绑定事件

boxDom.innerHTML = `<div class="red" id="inner_div">
    我是 innerHTML 插入的 div 标签的内容
</div>`

document.querySelector('#inner_div').onclick = (e) => {
    console.info('inner_div click .');
};

三总结

可以看出原生 JS 操作 DOM 元素还是很麻烦的，尤其是给新添加的 DOM 元素添加相关点击事件等更是恶心。

当前后端分离后，整个网站的业务逻辑都放在了前端。如果每个页面都是一个 HTML 文件的话，是不需要做 DOM 元素的操作，直接用超链就可以了，但是大部分页面的整个结构布局是不变的，变化的可能只是其中的一部分，所以现在更多的前端应用做的是单页面应用。这样针对整体相同，局部不同的页面，只需要调用后端接口拿到数据，再通过 JS 操作 DOM 元素插入页面显示就好了，相对于整个页面做到了局部渲染，更提高了用户体验。但是针对插入的 DOM 元素，可能还需要绑定更多的点击等相关事件，这时候原生 JS 操作 DOM 的局限性就体现的淋漓尽致。

接下来我们介绍 JS 框架 react 相关基础，看一看前端大牛们是怎么将业务复杂的前端做到组件化，更解决了我们以上提出的原生 JS 操作 DOM 的局限性。

React：(二)原生JS操作DOM元素

React：(二)原生JS操作DOM元素

关于作者 📝

目录

评论