成为前端牛马第十四天 —— DOM操作一

最新推荐文章于 2024-11-04 17:05:06 发布

明先生OvO

最新推荐文章于 2024-11-04 17:05:06 发布

阅读量142

点赞数 2

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_67963390/article/details/140922398

版权

一. 获取元素

常用方法为 querySelector 和 querySelectorAll ，括号内书写形式和css选择器一致，css怎么写里面就怎么写。

<body>
    <div id="box"></div>
    <ul class="list">
      <li class="items"></li>
      <li class="items"></li>
      <li class="items"></li>
      <li class="items"></li>
      <li class="items"></li>
    </ul>
    <input type="text" name="username" id="" />

    <script>
      /* 一. 获取非常规的元素 html head body */
      console.log(document.documentElement); //动态计算rem
      console.log(document.head);
      console.log(document.body);

      /* 二. 获取ID元素 */
      console.log(document.getElementById("box")); //直接就是标签
      //只会获取到单个DOM元素，id值具有唯一
      document.getElementById("box").innerHTML = " ";

      /* 三. 获取class类名 */
      console.log(document.getElementsByClassName("item"));

      /* 四. 获取带有name属性的标签 主要用于input表单 */
      console.log(document.getElementsByName("username"));

      /* 五. CSS方式获取元素 使用最多*/
      console.log(document.querySelector(".items"));
      console.log(document.querySelectorAll(".items"));

      /* 六. 标签名获取元素，返回值为伪数组 */
      console.log(document.getElementsByTagName("div"));
    </script>
  </body>

二. 操作元素

获取到的标签为文档对象，可以使用.语法最标签属性直接操作。

setAttribute主要设置自定义属性，当需要获取多个中的一个标签时，可以使用自定义属性设置标识，通过标识获取。

<body>
    <div id="box"></div>
    <input type="password" id="inp" />
    <button>eye</button>
    <div id="nmx">nmx</div>
    <script>
      /* 点语法操作属性 innerHTML操作标签结构和文本 value操作表单内容*/
      box.innerHTML = "123";
      //inp.value = "咸鱼茄子煲";

      /* 操作自定义属性一  setAttribute getAttribute removeAttribute*/
      nmx.setAttribute("nmx", "咸鱼茄子煲");
      /* 操作自定义属性二(H5) data-自定义属性名  .dataset */
      nmx.dataset.xiaoming = "茄子煲";
      delete nmx.dataset.xiaoming;
    </script>
  </body>

三. 操作元素样式

通过 style 属性进行修改样式时，是给标签添加行内样式，主要在修改量不大时使用。

className比较暴力美学，采用的是字符串拼接方式进行赋值，使用简单，效率高但没有去重等功能，多类名添加时还需注意空格问题。、

classList主要是调用方法的方式，更加灵活，唯一缺点可能是删除类名只能一个一个删，不如className。

/* 方法一 style属性 */
      let box = document.querySelector(".box");
      console.log(box.style["background-color"]); //对象key值
      console.log(box.style.backgroundColor); //驼峰
      //只能访问行内样式

      /* 方法二 className 类似字符串拼接 */
      box.className = "box2"; //直接赋值
      box.className += " box3"; //添加类名，注意空格

      /* 方法三 classList  */
      box.classList.add("classList"); //带有去重效果
      box.classList.remove("classList"); //只能一个一个删除，不如className
      box.classList.toggle("classList");
      box.classList.contains("classList");//是否包含该类名
      /* 
        需要添加或者删除多个类名，className的暴力美学更香,classList有兼容性问题
      */

四. 获取节点

<body>
    <div class="box">
      <p>咸鱼茄子煲</p>
      <p>阿明</p>
    </div>
    <script>
      let box = document.querySelector(".box");

      /*一.  .children 获取子元素节点  .childrenNodes 获取所有的子元素节点，包含文本节点*/
      console.log(box.children); //拿到的是伪数组
      box.children[0].innerHTML = "明先生";

      /* firestChild firstElementChild */
      /* lastChild lastElementChild */

      /* previousSibling previousElementSibling 获取上个兄弟*/
      /* nextSibling nextElementSibling 获取下个兄弟*/
      box.lastElementChild.previousElementSibling.innerHTML = "咸鱼茄子煲";
      box.firstElementChild.nextElementSibling.innerHTML = "明先生";

      /* 二.  .parentNode 获取父节点 */
      /* 三.  .attributes 获取自定义属性节点 */
    </script>
  </body>

五. 操作节点

append系列添加节点一般是添加到最后，要实现添加到最前面可以使用以下方法：

父节点.insertBefore(要添加的子节点, 父节点.firstChild);

<body>
    <div id="box">
      <div id="child">公交车</div>
    </div>
    <script>
      let obj_div_1 = document.createElement("div");
      obj_div_1.innerHTML = "yellow";
      let obj_div_2 = document.createElement("div");
      obj_div_2.innerHTML = "pink";
      //插入子节点 appendChild() / append()
      box.appendChild(obj_div_1);
      /* 随意插入节点 (要插入节点，在谁之前插入)*/
      box.insertBefore(obj_div_2, child);

      //删除节点 removeChild(child) remove()//删自己

      //替换节点 replaceChild(新节点，旧节点)
    </script>
  </body>