(二)原生JS操作DOM元素

日期:2018-10-22       浏览:519

一 初始化项目

<!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 的局限性。
扫码关注有惊喜

(转载本站文章请注明作者和出处 qbian)

暂无评论

Copyright 2016 qbian. All Rights Reserved.

文章目录