一初始化项目

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <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 元素

// 根据 标签名 获取 domconst boxDoms = document.getElementsByTagName('div')// 根据 id  获取 domconst boxDom = document.getElementById('box')// 根据 id 获取 domconst boxDom = document.querySelector('#box')// 根据 class 获取第一个 domconst 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元素

一 初始化项目

二 操作 DOM

三 总结

一初始化项目

二操作 DOM

三总结