react基础入门：原生JS操作DOM元素
Posted 智猿其说
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react基础入门：原生JS操作DOM元素相关的知识，希望对你有一定的参考价值。
一 初始化项目
<!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 元素
// 根据 标签名 获取 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元素的主要内容，如果未能解决你的问题，请参考以下文章