HTML5之DOM扩展

最新推荐文章于 2021-06-16 18:11:41 发布

diligentkong

最新推荐文章于 2021-06-16 18:11:41 发布

阅读量934

点赞数

分类专栏： html5 文章标签： HTML5-DOM DOM

本文链接：https://blog.csdn.net/diligentkong/article/details/61619758

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

以前我们学习javascript和jquery中，我们学习了获取dom元素的方法。比如：
js中：
获取id：document.getElementById(“id的名字”);
获取class：document.getElementsByClassName(“类名”);
获取元素：document.getElementsByTagName(“标签”);
jQuery中：
获取id： $(‘#box’); 获取类：$ (‘.box’);
获取元素：$(‘div p’);
在HTML5中也有操作DOM的功能，来看一下：

1.获取元素：

获取单个元素：
document.querySelector(‘css选择器’);
通过CSS选择器获取元素，符合匹配条件的第1个元素。
(只会获取符合条件的第一个元素)
获取所有符合条件的元素：
document.querySeletorAll(‘css选择器’);
通过CSS选择器获取元素，以类数组形式存在。

2.类名操作：

在jQuery中对类名的操作有 addClass() removeClass() hasClass() toggleClass();
html5新增的操作类名的方式和jquery一样好用

控制类名的API：

node.classList.add();添加类名
node.classList.remove()；删除类名
node.classlist.contains();判断是否包含指定的类名
node.classList.toggle()；切换指定的类名
node指一个有效的DOM节点，是一个通称。

示例代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 300px;
            height: 100px;
            margin:10px auto;
            border: 1px solid #000;
        }
        .active{
            border-radius: 50%;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box box1 "></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box4"></div>


    <button>切换</button>

    <script>
        var box1=document.querySelector('.box1');

        var box1=  document.querySelector('.box1');
//       添加类名
        box1.classList.add('active');
//        删除类名
//        box1.classList.remove('active');
//         contains:包含
//        判断是否包含某个类名  返回结果 true/false
        var f=box1.classList.contains('active');

        console.log(f);


//        切换类名
        document.querySelector('button').onclick=function(){
                                                                document.querySelector('.box3').classList.toggle('active');
        }
    </script>
</body>
</html>

3.自定义属性：

在HTML5中我们可以自定义属性，其格式如下data-*=”“，
（1）给标签添加自定义属性时必须以data-开头。例如：

<div class="box" title="盒子" data-content = "我是一个div" data-my-name = "diligentkong">我是一个盒子</div>

data-content=”我是自一个div”，是自定义的属性
data-my-name = “diligentkong” 也是自定义的属性
（2）获取自定义的属性值
通过Node.dataset[‘content’] 我们便可以获取到自定义的属性值。Node.dataset是以类对象形式存在的。
我们想要获取content的值，方法如下：

var box = document.querySelector(‘.box’);
console.log(box.dataset['content']); // 输出  我是一个div

当我们如下格式设置时，则需要以驼峰格式才能正确获取
data-my-name=” diligentkong “，获取Node.dataset[‘myName’]
（3）设置自定义属性的值
box.dataset[‘content’] = ‘改写content内容’;
为巩固上述知识，做个tab的案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body{
                margin: 0;
                padding: 0;
                background-color: #F7F7F7;
            }
            .tabs{
                width: 400px;
                margin: 30px auto;
                background-color: #fff;
                border: 1px solid #C0DCC0;
                box-sizing: border-box;

            }
            .tabs nav{
                height: 40px;
                text-align: center;
                line-height: 40px;
                overflow: hidden;
                background-color: #C0DCC0;
                display: flex;
            }
            nav a{
                display: block;
                width: 100px;
                border-right: 1px solid #fff;
                color: #000;
                text-decoration: none;
            }
            nav a:last-child{
                border-right: none;
            }
            nav a.active{
                background-color: #9BAF9B;
            }
            .content{
                overflow: hidden;
                display: none;
            }
            .content ol{
                line-height: 30px;
            }
        </style>
    </head>
    <body>
        <div class="tabs">
            <nav>
                <a href="javascript:;" data-content = "chinese">语文</a>
                <a href="javascript:;" data-content = "english">英语</a>
                <a href="javascript:;" data-content = "math">数学</a>
                <a href="javascript:;" data-content = "physics">物理</a>
            </nav>
            <section class="content" id="chinese">
                <ol>
                    <li>太阳当空照</li>
                    <li>花儿对我笑</li>
                    <li>你为什么背上小书包</li>
                    <li>我去上学校</li>
                    <li>好好学习</li>
                    <li>天天向上</li>
                </ol>
            </section>
            <section class="content" id="english">
                <ol>                      
                    <li>this is my day,this is my night</li>
                    <li>this is my pain, this is my life</li>
                    <li>this is what I was born to do</li>
                    <li>I was born to do</li>
                    <li>every new day, every new night</li>
                    <li>every new stage, every new fight</li>
                </ol>
            </section>
            <section class="content" id="math">
                <ol>
                    <li>高斯函数</li>
                    <li>傅里叶级数</li>
                    <li>最小二乘法</li>
                    <li>曲线拟合</li>
                    <li>导数</li>
                    <li>三角函数</li>
                </ol>
            </section>
            <section class="content" id="physics">
                <ol>
                    <li>牛顿定律</li>
                    <li>万有引力</li>
                    <li>弹簧质点</li>
                    <li>加速度</li>
                    <li>能量守恒</li>
                    <li>抛物线</li>
                </ol>

            </section>
        </div>
    </body>
</html>
<script>
//  tab栏切换 :首先默认显示一个当前的样式 ,当点击导航时,实现切换
    (function(key){
        // 获取所有的导航
        var navs = document.querySelectorAll('nav a');
        // 遍历导航 绑定事件，并且添加当前样式
        for (var i = 0; i < navs.length; i++) {
            if (key == i) {
                navs[i].classList.add('active');
                // 获得要显示内容的section的id 

                var secId = navs[i].dataset['content'];
                //console.log(secId);
                // 获取对应的section标签
                document.querySelector('#'+secId).style.display = 'block';

            }
            // 给每一个导航绑定点击事件
            navs[i].onclick = function(){
                // 获得之前有active样式的 清除掉，之前显示的section 隐藏
                var currNav = document.querySelector('.active');
                var currId = currNav.dataset['content'];
                // 去掉导航的active样式
                currNav.classList.remove('active');
                // 对应的区域内容
                document.querySelector('#'+currId).style.display='none';
                // 给当前点击的添加样式
                this.classList.add('active');
                var thatId = this.dataset['content'];
                document.querySelector('#'+thatId).style.display = 'block';
            }
        }
    })(0);
</script>