react基础入门：(二)原生JS操作DOM元素
2019-01-17 本文已影响147人
8b6370ea271c
一 初始化项目
<!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 的局限性。
扫码关注有惊喜
