Dom元素、classList对象、dataset对象、点击事件添加 - PHP学习

首页 > 博客列表 > Dom元素、classList对象、dataset对象、点击事件添加

博主信息

博文 28

粉丝 0

访问量 35266

专题推荐

更多>

获取dom元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="list">
        <li class="item" name ="first">item1</li>
        <li class="item">item2</li>
        <li class="item">item3</li>
        <li class="item active">item4</li>
        <li class="item">item5</li>
    </ul>
</body>
<script>
    var cl =console.log.bind(console);
    // 按标签来
    var lis = document.getElementsByTagName('li');
    cl(lis);  //返回一个类数组HTMLCollection(5)
    // 通过键来访问
    cl(lis[2]);
    cl(lis.item(2));
    cl(lis.length);
    // 按id
    var ul = document.getElementById("list");
    cl(ul);
    // class
    var lis = document.getElementsByClassName("item");
    cl(lis);
    var lis = document.getElementsByClassName("item active");
    cl(lis);
    // name 
    var first = document.getElementsByName("first");
    cl(first[0]);
    // CSS选择器
    // querySelector条件里的第一个
    var ul = document.querySelector("#list");
    cl(ul);
    var li = document.querySelector(".item");
    cl(li);
    var lis = document.querySelectorAll(".item");
    cl(lis);
    // 使用选择器
    var lis = document.querySelectorAll("#list > li:nth-of-type(-n+3");
    lis.forEach(function(item){
        item.style.color="red";
    })
</script>
</html>

遍历元素节点

js 节点有11种类型,但是与html相关的只有6个
- 1: 元素
- 2: 属性
- 3: 文本
- 6: 注释
- 9: 文档, document
- 11: 文档片断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
</body>
</html>
<script>
    var cl=console.log.bind(console);
    var ul = document.querySelector("ul");
    cl(ul);
    // childNodes子节点
    cl(ul.childNodes);
    cl(ul.childNodes[2]);
    // JS节点有11种类型，但是与html相关的只有6个
    cl(ul.childNodes[0].nodeType);
    cl(ul.childNodes[1].nodeValue);
    cl(ul.childNodes[1].nodeName);
    var eles=[];
    ul.childNodes.forEach(function(item){
        // 只返回类型为1的元素节点
        if(item.nodeType ===1)
        this.push(item);
    },eles);
    cl(eles);
    // 获取第一个子节点
    cl(ul.firstChild);
    // 最后一个字节点
    cl(ul.lastChild);
    // 前一个兄弟节点
    cl(ul.lastChild.previousSibling);
    // 后一个兄弟节点
    cl(ul.firstChild.nextSibling);
</script>

遍历元素节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
</body>
</html>
<script>
     var cl=console.log.bind(console);
     var ul =document.querySelector('ul');
    //  children
    // childNode返回所有节点，包括元素、文本...
    cl(ul.childNodes);
    // children:只返回元素
    cl(ul.children);
    cl(ul.children.length); // 等于cl(ul.childElementCount);
    // 第一个元素
    cl(ul.firstElementChild);
    // 任何一个
    cl(ul.children[2]);
    // 前一个兄弟节点
   cl(ul.children[2].previousElementSibling);
    for(var i = 0; i<ul.childElementCount;i++){
        cl(ul.children.item(i));
    }
</script>

classList对象

classList.add()添加属性
classList.remove()移除属性
classList.toggle()切换属性
classList.replace()替换属性

dataset对象

用于处理用户自定义的数据属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="user" data-id="101" data-user-name="admin" data-email="admin@qq.com">
        用户信息
    </div>
</body>
</html>
<script>
    var cl=console.log.bind(console);
    var user = document.querySelector("#user");
     // dataset后面的属性就是自定义的数据属性,去掉data-前缀
    cl(user.dataset.id);
    cl(user.dataset.userName);
    cl(user.dataset.email);
    user.dataset.userName="888";
    user.dataset.email="888@qq.com";
    cl(user.dataset.userName);
    cl(user.dataset.email);
</script>

事件添加方式

1.给HTML元素绑定事件属性
2.给Html元素添加属性
3.监听器
4.事件派发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="var text=this.innerText;alert(text);">按钮1</button>
    <button onclick="show(this)">按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
</body>
</html>
<script>
    var cl=console.log.bind(console);
    // 1.给HTML元素绑定事件属性
    function show(ele){
        var text =ele.innerText;
        alert(text);
    };
    // 2.给Html元素添加属性
    var btn3 = document.querySelector('button:nth-of-type(3)');
    btn3.onclick=function(){
        alert(this.innerText);
    };
    // 3.监听器
    var btn4 = document.querySelector("button:nth-of-type(4)");
    // btn.addEventListener(事件类型，事件回调函数，传递机制)
    btn4.addEventListener('click',function(){
        alert(this.innerText);
    },false);
    // 事件派发
    var btn5 =document.querySelector("button:last-of-type")
    btn5.addEventListener('click',function(){
        alert(this.innerText);
    },false);
    var ev = new Event("click");
    btn5.dispatchEvent(ev);
</script>

事件传递与事件委托/代理

事件的捕获与冒泡

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件传递与事件委托/代理</title>
  </head>
  <body>
    <div class="first">
      <div class="second">
        <div class="three">事件传递</div>
      </div>
    </div>
  </body>
  <script>
    // 事件的捕获与冒泡
   var cl = console.log.bind(console);
   var first = document.querySelector(".first");
   var second = document.querySelector(".second");
   var three = document.querySelector(".three");
   first.addEventListener("click",function(ev){
    // ev:事件对象
    // ev.type:事件类型
    // ev.target:触发事件的元素
    // ev.currentTarget：绑定事件的元素
    // cl(ev.target);
    // cl(ev.target.classList.item(0));
    cl("捕获阶段：" + "触发:" + ev.target.classList.item(0),"绑定:" + ev.currentTarget.classList.item(0));
   },true);
   second.addEventListener("click",function(ev){
    cl("捕获阶段：" + "触发:" + ev.target.classList.item(0),"绑定:" + ev.currentTarget.classList.item(0));
   },true);
   three.addEventListener("click",function(ev){
    cl("捕获阶段：" + "触发:" + ev.target.classList.item(0),"绑定:" + ev.currentTarget.classList.item(0));
   },true);
   first.addEventListener("click",function(ev){
    // ev:事件对象
    // ev.type:事件类型
    // ev.target:触发事件的元素
    // ev.currentTarget：绑定事件的元素
    // cl(ev.target);
    // cl(ev.target.classList.item(0));
    cl("冒泡阶段:" + "触发:" + ev.target.classList.item(0),"绑定:" + ev.currentTarget.classList.item(0));
   },false);
   second.addEventListener("click",function(ev){
    cl("冒泡阶段:" + "触发:" + ev.target.classList.item(0),"绑定:" + ev.currentTarget.classList.item(0));
   },false);
   three.addEventListener("click",function(ev){
    cl("冒泡阶段:" + "触发:" + ev.target.classList.item(0),"绑定:" + ev.currentTarget.classList.item(0));
   },false);
  </script>
   <ul>
       <li>item1</li>
       <li>item2</li>
       <li>item3</li>
       <li>item4</li>
       <li>item5</li>
   </ul>
   <script>
    //    document.querySelectorAll("ul li").forEach(function(item){
    //        item.addEventListener('click',function(ev){
    //         //    this === ev.target
    //         cl('当前触发事件的元素：',this);
    //         // cl('当前触发事件的元素：',ev.target);
    //        });
    //    });
    //    事件委托
    document.querySelector("ul").addEventListener("click",function(ev){
            //    this === ev.currentTarget
            cl(ev.target);
            cl(ev.currentTarget);
            cl('当前触发事件的元素：',this);
            cl('当前触发事件的元素：',ev.currentTarget);
            });
   </script>
</html>

总结

了解如何获取Dom元素，如何遍历元素节点
classList的使用。
dataset对象属性就是自定义的数据属性,去掉data-前缀，
JS中点击事件的4中添加方式
监听事件btn4.addEventListener(事件类型, 事件回调函数, 传递机制中false为冒泡阶段触发)

批改老师：

天蓬老师

批改状态：合格

老师批语：继续努力

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

HTML的基础知识、语法等...

2020-04-03 17:20:07