小白如何快速的学会怎么获取DOM元素&节点增删改查&元素属性、内容、样式操作

最新推荐文章于 2024-07-27 06:08:36 发布

wbw五十度灰

最新推荐文章于 2024-07-27 06:08:36 发布

阅读量388

点赞数 1

分类专栏： dom元素增删改查文章标签： jquery 前端 html css javascript

本文链接：https://blog.csdn.net/m0_51095089/article/details/111386206

版权

dom元素同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

增删改查

1 篇文章 0 订阅

订阅专栏

获取DOM元素&节点增删改查&元素属性、内容、样式操作

在这里插入图片描述

一，获取DOM元素 part1

    <div class="father">
      <form>
        <input type="text" name="test" />
        <input type="password" name="test" />
      </form>
    </div>
    <div class="father" id="box">我是div</div>

1.通过id获取指定元素

由于id不可以重复,所以找到了就会将找到的标签包装成一个对象返回给我们,找不到就返回Null
注意点:DOM操作返回的是一个对象,这个对象是宿主类型对象(浏览器提供的对象)

    let oDiv = document.getElementById("box");
    console.log(oDiv);
    console.log(typeof oDiv);

2.通过class名称获取

由于class可以重复,所以找到了就返回一个存储了标签对象的数组,找不到就返回一个空数组。

    let oDivs = document.getElementsByClassName("father");
    console.log(oDivs);

3.通过name名称获取

由于name可以重复,所以找到了就返回一个存储了标签对象的数组,找不到就返回一个空数组
注意点:getElementByName 在不用的浏览器其中工作方式不同.在IE和Opera中,getElementByName()方法还会返回哪些id为指定值的元素.

    let oDivs = document.getElementsByName("test");
    console.log(oDivs);

4.通过标签名称获取

由于标签名称可以重复,所以找到了就返回一个存储了标签对象的数组,找不到就返回一个空数组

    let oDivs =  document.getElementsByTagName("div");
    console.log(oDivs);

5.通过选择器获取(重点掌握)

querySelector只会返回根据指定选择器找到的第一个元素

    let oDiv = document.querySelector("#box");
    let oDiv = document.querySelector(".father");
    let oDiv = document.querySelector("div>form");
    console.log(oDiv);

6.通过选择器获取(重点掌握)

querySelectorAll会返回指定选择器找到的所有元素

    let oDivs = document.querySelectorAll(".father");
    console.log(oDivs);

二，获取DOM元素 part2。

    <div>
      <h1>1</h1>
      <h2>2</h2>
      <p class="item">3</p>
      <p>4</p>
      <span>5</span>
    </div>

1.获取指定元素所有的子元素

let oDiv = document,querySelector("div");
console.log(oDiv.children); //children属性获取到的是指定元素中所有的子元素
console.log(oDiv.childNodes);//childNodes属性获取到的是指定元素中所有的节点

for(let node of oDiv childNodes){
   if(node.nodeType === Node.ELEMENT_NODE){
console.log(node);
     }
}

2.节点:DOM对象(document),这个对象已树的形式保存了页面上所有的内容 HTML页面每一部分都是由节点(标签(元素),文本,属性)构成的

3.（1）获取指定节点中的第一个子节点

let oDiv = document.querySelector("div");
console.log(oDiv.firstChild);

（2）获取指定元素中的第一个子元素

console.log(oDiv.firstElementChild);

4.（1）获取指定节点中最后一个子节点

console.log(oDiv.lastChild);

（2）获取指定元素中最后一个子元素

console.log(oDiv.lastElementChild);

5.通过子元素获取父元素/父节点

let item = document,querySelector(".item");     
console.log(item.parentElement);
console.log(item.parentNode);

6.获取相邻上一个节点/元素

console.log(item.previousSibling);
console.log(item.previousElementSibling);

7.获取相邻下一个节点/元素

console.log(item.nextSibling);
console.log(item.nextElementSibling);

三，节点增删改查

    <div>
      <h1>我是标题</h1>
      <p>我是段落</p>
    </div>

1.创建节点

let oSpan = document.createElement("span");

2.添加节点

注意点:appendChild方法会将指定的元素添加到最后

let oDiv = document.querySelector("div");
oDiv.appendChild(oSpan)
let oA = document.createElement("a");
oDiv.appendChild(oA);

3.插入节点

let oSpan = document.createElement("span");
let oDiv = document.querySelector("div");
let oH1 = document.querySelector("h1");
let oP = document.querySelector("p");
oDiv.insertBefore(oSpan, oH1); //含义:将oSpan 添加到oDiv里,并且在oH1
//之前
 // oDiv.insertBefore(oSpan, oP);

4.删除节点

注意点: 在js中如果想要删除某一个元素, 只能通过对应的父元素来删除
元素是不能够自删的

let oSpan = document.createElement("span");
let oDiv = document.querySelector("div");
let oH1 = document.querySelector("h1");
let oP = document.querySelector("p");
oDiv.insertBefore(oSpan, oP);  
console.log(oSpan.parentNode); //拿到oSpan的父元素 
oSpan.parentNode.removeChild(oSpan); //通过元素的父元素 删除父元素中指定的子元素 
oDiv.parentNode.removeChild(oDiv);

5.克隆节点

注意点: cloneNode方法默认不会克隆子元素, 如果想克隆子元素需要传递一个true

let oDiv = document.querySelector("div"); //拿到div 并赋值给oDiv
let newDiv =  oDiv.cloneNode(); // 克隆oDiv 不包含子元素
let newDiv =  oDiv.cloneNode(true); //传递true 包含子元素
console.log(newDiv);

四，元素属性操作

<img src="images/1.jpg" alt="我是alt" title="我是title" zxw="999" />

无论是通过document创建还是查询出来的标签,系统都会讲元素包装成一个对象返回给我们,系统在包装这个对象的时候回自动将元素的属性都包装到这个对象中,所以只要拿到这个对象就可以拿到标签属性,操作标签属性

let oImg = document.querySelector("img");
//let oImg = document.createElement("img");
console.dir(oImg); //console.log()会在浏览器控制台打印出信息; console.dir()可以显示一个对象的所有属性和方法

1.获取元素属性 >

let oImg = document,querySelector("img")
//console.log(oImg.alt);
console.log(oImg.getAttribute("alt"));

注意点: 通过对象.属性名称的方式无法获取到自定义属性的取值
通过getAttribute方法可以获取到自定义属性的取值

2.修改元素属性

let oImg = document.querySelector("img");
//oImg.title = "新的title";
oImg.setAttribute("title", "新的title222"); //参数:要修改的属性名 参数:新的属性值

注意点:和获取元素属性一样

3.新增元素属性

let oImg = document.querySelector("img");
oImg.setAttribute("zxw", "666");

注意点: setAttribute方法如果属性不存在就是新增, 如果属性存在就是修改

4,删除元素属性

let oImg = document.querySelector("img");
// oImg.alt = "";
oImg.removeAttribute("alt");

注意点：和获取元素属性一样

五，元素内容操作

    <div>
      我是div
      <h1>我是标题</h1>
      <p>我是段落</p>
    </div>

1.获取元素内容

   let oDiv = document.querySelector("div"); //拿到div
   console.log(oDiv.innerHTML);
   console.log(oDiv.innerText);
   console.log(oDiv.textContent);

innerHTML&innerText&textContent差异

**1.**innerHTML获取的内容包含标签, innerText/textContent获取的内容不包含标签
**2.**innerHTML/textContent获取的内容不会去除两端的空格, innerText获取的内容会去除两端的空格

2.设置元素内容

      let oDiv = document.querySelector("div");
      // oDiv.innerHTML = "123";
      // oDiv.innerText = "456";
      // oDiv.textContent = "789";
      //  oDiv.innerHTML = "<span>我是span</span>";
      //  oDiv.innerText = "<span>我是span</span>";
      //  oDiv.textContent = "<span>我是span</span>";

特点:
无论通过innerHTML/innerText/textContent设置内容, 新的内容都会覆盖原有的内容

区别:
如果通过innerHTML设置数据, 数据中包含标签, 会转换成标签之后再添加
如果通过innerText/textContent设置数据, 数据中包含标签, 不会转换成标签, 会当做一个字符串直接设置

在企业开发中,因为有浏览器兼容的问题,所以innerText/textContent是结合起来使用的.所以如果我们想把内容当做字符串设置进去的话,我们一般这样操作

      function setText(obj, text) {
        if ("textContent" in obj) {
          obj.textContent = text;
        } else {
          obj.innerText = text;
        }
      }

六，操作元素样式

    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: red;
      }
    </style>
 
    <div class="box"></div>

1.设置元素样式

    let oDiv = document.querySelector("div"); 拿到div
    // 第一种方式
       注意点: 由于class在JS中是一个关键字, 所以叫做className
       oDiv.className = "box"; 为div设置一个值   
    // 第二种方式
    // 注意点: 过去CSS中通过-连接的样式, 在JS中都是驼峰命名
    // 注意点: 通过JS添加的样式都是行内样式, 会覆盖掉同名的CSS样式
    oDiv.style.width = "300px";
    oDiv.style.height = "300px";
    oDiv.style.backgroundColor = "blue";

2.获取元素样式

      let oDiv = document.querySelector("div");
      // oDiv.style.width = "300px";
      // 注意点: 通过style属性只能过去到行内样式的属性值, 获取不到CSS设置的属性值
      // console.log(oDiv.style.width);
      // 注意点: 如果想获取到CSS设置的属性值, 必须通过getComputedStyle方法来获取
      // getComputedStyle方法接收一个参数, 这个参数就是要获取的元素对象
      // getComputedStyle方法返回一个对象, 这个对象中就保存了CSS设置的样式和属性值
      let style = window.getComputedStyle(oDiv);
      console.log(style.width);