HTML5之新增Dom语法-CFANZ编程社区

querySelector方法

示例代码：

var node = document.querySelector(css选择器);

querySelectorAll

示例代码：

var nodeLists = document.querySelectorAll(css选择器);

classList

可用方法：
- add ：添加一个 class 到元素的 class 列表中
- remove ：从元素的 class 列表中移除一个 class
- toggle ：切换一个 class 是否存在于一个元素的 class 列表中
- contains ：查询一个指定的 class 是否存在于元素的 class 列表中
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5新增dom操作语法</title>
    <style type="text/css">
        .top{
            width: 100%;
            height: 100px;
            background-color: red;
        }
        .pink{
            border: 10px solid pink;
        }
    </style>
</head>
<body>
    <header class="pink yellow"></header>
    <input type="button" name="" onclick="changeColor()">
    <script type="text/javascript">
    

        function changeColor() {
            // 选择器的方式
            // 获取元素
            var dom = document.querySelector("header");

            // 测试classList属性的方法
            // 添加class
            dom.classList.add("top");
            // 移除class
            dom.classList.remove('pink');
            // 判断是否含有class
            alert(dom.classList.contains('orange'));
            // 如果有class 删除 如果没有class 添加
            dom.classList.toggle('pink');
        }
    </script>
</body>
</html>

H5_data*属性

语法:
- data-:这个是固定格式
- data-xxx:xxx是自定义的值
注意:
- 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
- 属性值可以是任意字符串
- 不要使用纯数字,特殊字符等作为自定义值
- 如果data之后使用-连接多个值,取值时,需要使用驼峰命名
示例代码:

<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li> 
<li data-animal-type="spider">Tarantula</li> 
</ul>

获取方式:


// 假定有这么一个元素
<li data-type="bird" id="liObj">Owl</li>
<li data-animal-type="spider" id="liObj2">蜘蛛</li>
<script>
    var domObj = document.getElementById("liObj");
   var type = domObj.dataset["type"]
   
    var domObj2 = document.getElementById("liObj2");
   var type2 = domObj.dataset["animalType"]
</script>