遇见DOM

最新推荐文章于 2023-03-06 14:29:08 发布

浪漫的宇航员

最新推荐文章于 2023-03-06 14:29:08 发布

阅读量1k

点赞数

文章标签： javascript 前端 js 函数式编程数组

本文链接：https://blog.csdn.net/m0_57391937/article/details/124310839

版权

1. 通过id获取元素（getElementById）

2. 通过标签获取元素(getElementsByTagName)

3. 通过父集获取子元素

4. 通过class名获取元素(htmlCollection)

什么是DOM

文档对象模型(Document Object Model,简称DOM)，是w3c组织推荐处理的可扩展标记语言(html或者XML)的标准接口。

w3c已经定义一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结果和样式。

一. 节点层级

概念：任何html或者xml文档都可以用DOM表示为一个由节点构成的层级结构，节点分为很多类型，每一种类型都对应着文档中不同的信息和标记，也都有自己不同的特性、数据和方法，而且与其他类型有某种关系，这些关系构成了层级，下面可以表示为一个以特定节点为根的树形结构，以下面的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>
    <p class="eat">今天吃橘子了吗？</p>
</body>
</html>


//document 节点表示每个文档的根节点
//html成为文档元素，每个文档只有一个文档元素
//DOM 总共有12种节点类型,  主要是三种（元素节点，属性节点，文本节点）

二. Document类型

概念：Document类型是javascript中表示文档节点的类型，document 是window对象的熟悉，因此是一个全局对象。

//取得对body的引用
   let body = document.body;
   console.log(body);

//取得对html的引用
   let html = document.documentElement;
   console.log(html);

//读取文档标题
   let originaTitle = document.title; 
   console.log(originaTitle);

//修改文档标题
   document.title = "hello world";

三. 获取元素

1. 通过id获取元素（getElementById）

//  通过id获取元素（getElementById）
let box =  document.getElementById("box");
console.log(box);

//  返回null
let box =  document.getElementById("boxx");   //如果该id="boxx" 不存在  就会返回null
console.log(box);  //null

2. 通过标签获取元素(getElementsByTagName)

//  通过标签获取元素(getElementsByTagName)
let list_item = document.getElementsByTagName("li");
console.log(list_item);  //htmlCollections(元素集合)
console.log(list_item[0]);  //取到第一个元素 li

3. 通过父集获取子元素

//  通过父集获取子元素
let oul = document.getElementsByTagName("ul")[0];
let list_item = oul.getElementsByTagName("li");
console.log(list_item);

4. 通过class名获取元素(htmlCollection)

//  通过class名获取元素(htmlCollection)
let box = document.getElementsByClassName("box")[0];
console.log(box);

5. 通过选择器获取元素

//通过选择器获取元素
let box = document.querySelector(".box");
console.log(box);
let li = document.querySelector("li");  //只能获取单个
console.log(li);
let li_list = document.querySelectorAll("li");   //获取所有的li
console.log(li);

四. 获取(修改)元素自身的属性

  // 获取元素自身的属性

  let box = document.getElementById("div1");
  console.log(box.id);  //获取id
  console.log(box.title);  //获取title
  console.log(box.classList);  //获取class


  // 自身的熟悉 同样是可以修改的
  let box = document.getElementById("div1");
  box.className = "myBox";
  box.title = "今天晚上吃橘子吧！";

五. DOM事件处理程序

概念：传统的事件处理程序是把一个函数赋值给一个事件处理程序属性，该方式写法简单且直到现在所有的现代浏览器都支持此方法

// 文档夹加载过程  onload事件
  window.onload = function(){
    let box = document.getElementById("div1");

    box.className = "myBox";
    box.title = "今天晚上吃面吧！";
  }

// onclick事件
   let btn  = document.querySelector(".btn");
   btn.onclick = function(){
      alert("我被人点了");
   }

1. 获取元素节点

1. 获取父节点

//  获取父节点
   let txt = document.querySelector(".txt");
   let box = txt.parentNode;
   console.log(box);

2. 获取兄弟节点

//  获取兄弟节点 
    let txt = document.querySelector(".txt");

    let box = txt.parentNode;
    let imgs = txt.nextElementSibling;   //获取下一个兄弟元素
    let p  = txt.previousElementSibling; //获取上一个兄弟元素
    console.log(imgs);
    console.log(p);

3. 获取第一个(最后一个)子节点

// 获取第一个(最后一个)子节点
   let box = document.querySelector(".box");

   let firstElement = box.firstElementChild;   //获取第一个子节点
   let lastElement = box.lastElementChild;   //获取最后一个子节点
   console.log(firstElement);
   console.log(lastElement);

4. 获取所有的子节点

// 获取所有的子节点
   let box = document.querySelector(".box");

   console.log(box.childNodes); //包含(文本节点，元素节点)
   console.log(box.children);  //获取子节点（只包括元素节点）

5. 节点操作案例

// nodeType 用于判断节点类型 (1.元素节点   2.属性节点   3.文本节点 ....... 8.注释节点)
  let box = document.querySelector(".box");
  // console.log(box.childNodes); //包含(文本节点，元素节点)

  let nodeList = box.childNodes;
  console.log(nodeList[0].nodeType);  //3 


//案例   模拟一个children方法的底层实现
   //1.获取标签
       let box  = document.querySelector(".box");
   //2.获取标签内部的所有节点
       let children = box.childNodes;
   //3.使用遍历实现过滤
       let  filterArr = [];
       children.forEach(function(item,index){
           if(item.nodeType === 1){
               filterArr.push(item);
           }
       })
       console.log(filterArr);

2. 修改元素内容

// innerText 
let btn = document.querySelector(".btn");
let p = document.querySelector('p');

btn.onclick = function(){
    p.innerText = "肯定是小橘啊!";
}



// innerHTML
let btn = document.querySelector(".btn");
let p = document.querySelector('p');

btn.onclick = function(){
    p.innerHTML = "<strong>肯定是小橘啊!</strong>";
}

//总结  innerHTML能够解析html标签 而innerText只能操作文本

浪漫的宇航员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
遇见DOM

目录什么是DOM一. 节点层级二. Document类型三. 获取元素1.通过id获取元素（getElementById）2.通过标签获取元素(getElementsByTagName)3.通过父集获取子元素4.通过class名获取元素(htmlCollection)5.通过选择器获取元素四. 获取(修改)元素自身的属性五. DOM事件处理程序1. 获取元素节点1. 获取父节点2. 获取兄弟节点3. 获取第一个(最后一个)子节点4...
复制链接

扫一扫