前端之DOM方法

潘诺西亚的火山

已于 2022-02-11 17:45:05 修改

阅读量380

点赞数

文章标签：前端 javascript html5

于 2022-02-10 15:09:34 首次发布

本文链接：https://blog.csdn.net/helldoger/article/details/122861426

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="box11"></div>
    <div class="box22"></div>
    <div class="box33"></div>
    <form action="">
      <input type="text" name="username" id="usernameid" value="" />
    </form>
    <script type="text/javascript">
      //1,通过元素Id获取对象,唯一性
      var box = document.getElementById("box11");
      console.log(box);
      //2,通过标签名获取
      var box1 = document.getElementsByTagName("div");
      for (var i = 0; i < box1.length; i++) {
        var box = box1[i];
        console.log(box);
      }
      //console.dir(box1);
      //3,通过name获取元素
      var input1 = document.getElementsByName("username");
      console.dir(input1);
      //4,通过类名获取元素
      var box2 = document.getElementsByClassName("box22");
      console.dir(box2);
      //5,通过选择器
      var boxes1 = document.querySelector("#box11"); //通过id
      var boxes2 = document.querySelector(".box22"); //通过类名
      console.dir(boxes1);
      console.dir(boxes2);
      //6, 获取多个指定元素
      var boxes3 = document.querySelectorAll("div");
      console.dir(boxes3);
    </script>
  </body>
</html>

事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn1">点击我</button>
    <div class="div1">我是显示的内容</div>
    <p>确定是修改了内容么?</p>
    <script type="text/javascript">
      //1,获取元素
      var btn11 = document.querySelector("#btn1");
      var div11 = document.querySelector(".div1");
      var p = document.querySelector("p");
      //2,添加注册事件
      btn11.onclick = function () {
        div11.innerText = "<strong>我被点击了</strong>";
        p.innerHTML = "<strong>真的被修改了!</strong>";
        //innerText与innerHTML有区别.
        //innerText不识别Html标签,是非标准的.会去掉空格和换行
        //innerHTML 识别HTML标签,推荐使用. 保留空格和换行
      };
    </script>
  </body>
</html>

设置属性更换样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      .div2 {
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .bg2 {
        width: 150px;
        height: 150px;
        background-color: yellowgreen;
      }
    </style>
  </head>
  <body>
    <button id="btn1">点击我</button>
    <div class="div1" style="background-color: blue">我是显示的内容div1</div>
    <br />
    <div class="div2">我是显示的内容div2</div>
    <br />
    <a href="http://www.colg.cn" title="游戏论坛"></a>
    <br />
    <p>确定是修改了内容么?</p>
    <br />
    <input class="input1" type="text" value="请输入内容" />
    <br />
    <script type="text/javascript">
      //1,获取元素
      var btn11 = document.querySelector("#btn1");
      var div11 = document.querySelector(".div1");
      var div12 = document.querySelector(".div2");
      var p = document.querySelector("p");
      var a = document.querySelector("a");
      var input1 = document.querySelector(".input1");
      //2,添加注册事件
      btn11.onclick = function () {
        //2.1获取a标签内容
        console.log(a.href);
        //2.2更换a标签标题
        a.title = "打碟论坛";
        //2.3少量样式修改
        div11.style.backgroundColor = "green";
        //div12.style.backgroundColor = "pink";
        //2.4大量更换样式
        //div12.className = "div2 bg2"; //更换样式 且保留类名
        div12.className = "bg2";
        //2.5 表单修改
        input1.value = "你输入内容了吗?";
        this.disabled = true; //点一次禁用按钮
        //2.6 获取属性, 也可以获取自定义属性
        console.log(btn11.getAttribute("id"));
        //2.7 设置属性
        div11.setAttribute('class','小强');
        //2.8 自定义属性 H5 规定, 自定义属性以data-开头
        //console.log(box.dataset.index);
        //console.log(box.dataset['index']); //dataset中是自定义属性的集合
        //box.dataset.username = '小刚';
        //div.removeAttribute('xxxx');
      };
    </script>
  </body>
</html>

注册事件:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件</title>
  </head>
  <body>
    <button>传统方法注册</button>
    <button>方法监听注册</button>
    <button>IE9以前版本支持</button>

    <ul id="ul1">
        <li>枪兵王</li>
        <li>枪兵王</li>
        <li>枪兵王</li>
        <li>枪兵王</li>
        <li>枪兵王</li>
    </ul>

    <script type="text/javascript">
      var btns = document.querySelectorAll("button");
      //1,传统方法注册事件: 只能给同一个元素注册一个事件,后面注册会覆盖前面
      btns[0].onclick = function () {
        alert("传统事件1");
      };
      btns[0].onclick = function () {
        alert("传统事件2");
      };
      //传统事件解绑
      //btns[0].οnclick=null;

      //2,使用监听方法注册, 可以注册多个事件
      // 正常函数
      btns[1].addEventListener("click", fn);
      function fn() {
        alert("监听方法注册事件!");
      }
      //解绑时, 不能使用匿名函数
      //btns[1].removeEventListener('click',fn);

      //匿名函数
      btns[1].addEventListener("click", function () {
        alert("监听方法注册事件第二个!");
      });
      

      //3,IE9以下支持
      btns[2].attachEvent('onclick',function()
      {  
        alert("IE9以下支持");
      });

      //4, 事件和委托
      var ul = document.querySelector('#ul1');
      ul.addEventListener("click", function()
      {
          alert("雀茶!雀茶!");
      });
    </script>
  </body>
</html>

事件委托:

可以把事件监听设置到元素的父节点上, 利用冒泡原理设置影响到每个子节点.

例如给ul 注册事件, 然后利用事件对象的target找到当前事件的li, 事件会冒泡到ul 上, ul 上有注册事件, 就会触发事件监听器.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="ul1">
        <li>枪兵王</li>
        <li>枪兵王</li>
        <li>枪兵王</li>
        <li>枪兵王</li>
        <li>枪兵王</li>
    </ul>
        <script type="text/javascript">
        var ul = document.querySelector('#ul1');
        ul.addEventListener('click',function(e){
            //alert("雀茶雀茶!");
            e.target.style.backgroundColor = 'red';
        })
    </script>
</body>
</html>

潘诺西亚的火山

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端之DOM方法

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titl
复制链接

扫一扫