普歌-智音团队 javascript-DOM重点总结

最新推荐文章于 2020-08-20 19:52:54 发布

lihaijin8090

最新推荐文章于 2020-08-20 19:52:54 发布

阅读量231

点赞数

分类专栏： javascript-DOM 文章标签： javascript dom js

本文链接：https://blog.csdn.net/weixin_45498167/article/details/107881643

版权

javascript-DOM 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

DOM重点内容目录

一.元素的操作

获取元素
 修改元素内容
 常用鼠标事件
 修改样式属性
 className给元素添加类名
 获取自定义属性值，设置属性值和移除属性

二.节点的操作
父节点节点操作
 子节点操作
 兄弟节点
 创建节点和添加节点
 删除节点
 复制节点

正题开始

获取元素
获取元素有4种方法
1.根据id获取

doccument.getElementById("标签名")

2.根据标签名获取

doccument.getElementsByTagName("标签名")

3.根据HTML5新增的方法获取

//根据类名返回元素集合对象
document.getElementsByClassName("类名")
//根据指定选择器返回第一个元素对象
document.querySelector("选择器")
//根据指定选择器返回
document.querySelectorAll("选择器")

4.特殊元素获取

//获取body元素
doucument.body
//获取html元素
document.documentElement //返回html元素对象

修改元素内容

innerHTML和innerText

element.innerHTML//从起始位置到终止位置的内容，但他去除HTML标签，同时空格和换行也会去掉

element.innerText//起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

常用鼠标点击事件

在这里插入图片描述
修改样式属性

   <style>
      div {
        width: 200px;
        height: 200px;
        background-color: violet;
      }
    </style>
  </head>
  <body>
    <div></div>
    <script>
      var div = document.querySelector("div");
      div.onclick = function () {
        this.style.backgroundColor = "purple";
      };
    </script>

className给元素添加类名

    <style>
      .text {
        width: 100px;
        height: 100px;
        background-color: teal;
      }
      .change {
        width: 200px;
        height: 200px;
        background-color: thistle;
        margin-top: 200px;
      }
    </style>
  </head>
  <body>
    <div class="text"></div>
    <script>
      var text = document.querySelector(".text");
      text.onclick = function () {
        this.className = "text change";
      };
    </script>

获取自定义属性 在这里插入图片描述

 <body>
    <div id="demo" index="1" class="nav"></div>
    <script>
      var div = document.querySelector("div");
      //   获取id的名字
      console.log(div.id);

      console.log(div.getAttribute("id"));
      //   获取自定义属性
      console.log(div.getAttribute("index"));

      //   设置属性值
      div.id = "test";
      //   这个的class必须写成className
      div.className = "navs";
      //   element.setAttribute 把div的index属性改为2
      div.setAttribute("index", 2);
      div.setAttribute("class", "navss");

      //   移除属性
      div.removeAttribute("index");
    </script>

节点操作概述
在这里插入图片描述
父节点操作

 <body>
    <div class="box">
      <span class="erweima"></span>
    </div>
    <script>
      //1.父节点 parentNode
      var erweima = document.querySelector(".erweima");
      //获取二维码的父节点
      console.log(erweima.parentNode);
    </script>

子节点操作
在这里插入图片描述

兄弟节点操作
这个方法不兼容IE9
解决兼容性问题
创建节点和添加节点

 <body>
    <ul>
      <li>1234</li>
    </ul>
    <script>
      //创建节点元素节点
      var li = document.createElement("li");
      //   添加节点
      var ul = document.querySelector("ul");
      ul.appendChild(li);
      //   指定元素前面添加节点
      var lili = document.createElement("li");
      ul.insertBefore(lili, ul.children[0]);
    </script>
  </body>

删除节点
在这里插入图片描述

  <body>
    <button>删除</button>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <script>
      var ul = document.querySelector("ul");
      var btn = document.querySelector("button");
      btn.onclick = function () {
        if (ul.children.length == 0) {
          this.disabled = true;
        } else {
          ul.removeChild(ul.children[0]);
        }
      };
    </script>
  </body>

复制节点
在这里插入图片描述

 <body>
    <button>删除</button>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <script>
      var ul = document.querySelector("ul");
      var btn = document.querySelector("button");
      btn.onclick = function () {
        if (ul.children.length == 0) {
          this.disabled = true;
        } else {
          ul.removeChild(ul.children[0]);
        }
      };
    </script>
  </body>

返回顶部

lihaijin8090

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
普歌-智音团队 javascript-DOM重点总结

DOM重点内容目录一.元素的操作1.获取元素2.修改元素内容3.事件4.修改样式属性5.className给元素添加类名6.获取自定义属性值7.设置属性值8.移除属性二.节点的操作1.父节点节点操作2.子节点操作3…兄弟节点4.创建节点和添加节点5.删除节点6.复制节点获取元素获取元素有4种方法1.根据id获取doccument.getElementById("标签名")2.根据标签名获取doccument.getElementsByTagName("标签名")
复制链接

扫一扫

专栏目录