首页 > 其他分享 >06-Web API

06-Web API

时间：2024-07-10 22:09:24浏览次数：7  
标签：Web bodyChildnodes 06 元素 boxEl Document API var document

01 DOM的概念

02 BOM概念

除了DOM对象以外都是BOM，例如上图浏览器上的一些东西

03 DOM的继承关系图

04 节点之间的导航

获取一个节点之后,可以根据这个节点去获取其它节点，称之为节点之间的导航

获取节点

代码示例

<!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 class="box">你好</div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <script>
    var bodyE1 = document.body
    // 获取所有子节点
    console.log(bodyE1.childNodes)
    // 获取第1个子节点
    console.log(bodyE1.firstChild)
  </script>
</body>
</html>

05 元素之间的导航

5.1 根据body元素去获取子元素

<!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 class="box">你好</div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <script>
    var bodyE1 = document.body
    // 根据body元素去获取子元素
    var childElements = bodyE1.children
    console.log(childElements)
  </script>
</body>
</html>

5.2 获取box元素

<!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 class="box">你好</div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <script>
    var bodyE1 = document.body
    // 第1种方法
    var boxE1 = bodyE1.firstElementChild
    console.log(boxE1)
    // 第2种方法
    var boxE2 = bodyE1.children[0]
    console.log(boxE2)
  </script>
</body>
</html>

06 DOM获取任意元素对象

6.1 案例1: 通过classname获取元素

<!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 class="box">
    <h2>标题2</h2>
    <div class="container">
      <p>
        你好, <span class="keyword">哈哈</span>世界
      </p>
    </div>
  </div>
  <script>
    // 1. 先拿到body元素
    var bodyEl = document.body
    // 2. 拿到box
    var boxEl = bodyEl.firstElementChild
    // 3. 拿到container
    var containerEl = boxEl.children[1]
    // 4. 拿到p元素
     var pEl = containerEl.children[0]
    //  5. 拿到keyword然后修改样式
    var spanEl = pEl.children[0]
    spanEl.style.color = "red"
  </script>
</body>
</html>

可以看到要修改这个字体非常的复杂，因此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">
  <title>Document</title>
</head>
<body>
  <div class="box">
    <h2>标题2</h2>
    <div class="container">
      <p>
        你好, <span class="keyword">哈哈</span>世界
      </p>
      <p>
        你好, <span class="keyword">哈哈</span>世界
      </p>
    </div>
  </div>
  <script>
    // 直接获取
    var keywordEls = document.getElementsByClassName("keyword")
    // 修改第1个
    // keywordEls[0].style.color = "red"
    // 修改所有的keyword
    for (var i = 0; i < keywordEls.length; i++){
      keywordEls[i].style.color = "red"
    }
  </script>
</body>
</html>

6.2 案例2: 通过id获取

<!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 class="box">
    <h2>标题2</h2>
    <div class="container">
      <p>
        你好, <span id="keyword">哈哈</span>世界
      </p>
    </div>
  </div>
  <script>
    var keywordEl = document.getElementById("keyword")
    keywordEl.style.color = "orange"
  </script>
</body>
</html>

6.3 其它的相关方法

07 节点node常见的属性

7.1 节点的数值类型

<!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 class="box">div元素</div>
  <script>
    // 1. 获取3个节点
    var bodyChildnodes = document.body.childNodes
    var commentNode = bodyChildnodes[1]
    var textNode = bodyChildnodes[2]
    var divNode = bodyChildnodes[3]
    
    // 2. 节点属性
    console.log(commentNode.nodeType, textNode.nodeType, divNode.nodeType)
    for (var node of bodyChildnodes){
      if (nodeType === 8){

      } else if (nodeType === 8) {

      } else if (nodeType === 1){
        
      }
    }
  </script>
</body>
</html>

7.2 nodename和tagname

nodename针对节点 tagname针对元素

<!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 class="box">div元素</div>
  <script>
    // 1. 获取3个节点
    var bodyChildnodes = document.body.childNodes
    var commentNode = bodyChildnodes[1]
    var textNode = bodyChildnodes[2]
    var divNode = bodyChildnodes[3]
    
    console.log(commentNode.nodeName, textNode.nodeName, divNode.nodeName)
    console.log(divNode.tagName)
  </script>
</body>
</html>

7.3 innerHTML+textContent+data

7.3.1 data: 非元素节点获取数据

<!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 class="box">div元素</div>
  <script>
    // 1. 获取3个节点
    var bodyChildnodes = document.body.childNodes
    var commentNode = bodyChildnodes[1]
    var textNode = bodyChildnodes[2]
    var divNode = bodyChildnodes[3]
    console.log(commentNode.data)
    console.log(divNode.data)
  </script>
</body>
</html>

7.3.2 innerHTML和textContent

innerHTML针对的是元素节点获取数据，textContent针对是元素里面的数据

<!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 class="box">
    <h2>123</h2>
  </div>
  <script>
    // 1. 获取3个节点
    var bodyChildnodes = document.body.childNodes
    var commentNode = bodyChildnodes[1]
    var textNode = bodyChildnodes[2]
    var divNode = bodyChildnodes[3]
    // 这个会拿到HTML元素也会拿到数据
    console.log(divNode.innerHTML)
    // 这个只会拿到元素中的数据
    console.log(divNode.textContent)
  </script>
</body>
</html>

7.3.3 innerHTML和textContent的区别

<!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 class="box">
    <h2>123</h2>
  </div>
  <script>
    // 1. 获取3个节点
    var bodyChildnodes = document.body.childNodes
    var commentNode = bodyChildnodes[1]
    var textNode = bodyChildnodes[2]
    var divNode = bodyChildnodes[3]
    // 会把HTML元素解析出来
    divNode.innerHTML = "<h2>test</h2>"
  </script>
</body>
</html>

08 元素的全局属性hidden

用来隐藏元素

<!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 class="btn">切换</button>
  <div class="box">test</div>
  <script>
    // 1. 获取元素
    var boxEl = document.querySelector(".box")
    var btnEl = document.querySelector(".btn")
    // 2. 监听事件
    btnEl.onclick = function(){
      if (boxEl.hidden === false){
        boxEl.hidden = true
      } else {
        boxEl.hidden = false
      }
    }
    // 3. 更加简洁的写法
    btnEl.onclick = function(){
      boxEl.hidden = !boxEl.hidden
    }
  </script>
</body>
</html>

09 attribute

9.1 attribute的分类

9.2 attribute的操作

示例代码

<!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="abc" title="box" class="box" age="17" height="1.98">box元素</div>
  <script>
    var boxEl = document.querySelector(".box")
    console.log(boxEl.hasAttribute("age"), boxEl.hasAttribute("name"), boxEl.hasAttribute("id"))
    console.log(boxEl.hasAttribute("height"))
  </script>
</body>
</html>

因为它的值总是字符串类型，在某些场景下其实也是一个缺陷，例如如下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="checkbox" checked>
    <script>
        var inputEl = document.querySelector("input")
        console.log(inputEl.getAttribute("checked"))
    </script>
</body>
</html>

在这种情况下，我们希望得到的是input这个元素到底有没有被选中应该是布尔值是比较好的，但是上述的代码中得到的结果是一个空字符串

9.3 元素dataset的使用

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box" data-age="18" data-height="1.88"></div>
    <script>
        var boxEl = document.querySelector(".box")
        console.log(boxEl.dataset.age)
        console.log(boxEl.dataset.height)
    </script>
</body>
</html>

10 元素的属性property

对象中的属性叫做property，元素中的属性叫做attribute
标准的attribute,会有其对应的property属性

11 元素的class和style

11.1 动态添加class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            color: red;
            font-size: 24px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box">box元素</div>
    <script>
        // 1. 获取元素
        var boxEl = document.querySelector(".box")
        // 2. 监听点击
        boxEl.onclick = function(){
            // 第1种方法: 直接修改style(不推荐使用),这种方法适合用那种精确的修改某些值
            // boxEl.style.color = "red"
            // boxEl.style.fontSize = "24px"
            // boxEl.style.background = "green"
            // 第2种方法: 动态添加clss(推荐使用)
            boxEl.className = "active"
        }
    </script>
</body>
</html>

11.2 元素的className和classList

className不推荐使用因为会覆盖掉原来元素中class的值，classList则不会覆盖掉原来元素中class的值

11.2.1 classList相关方法

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            background-color: #f80;
        }
    </style>
</head>
<body>
    <button class="btn">切换</button>
    <div class="box">box元素</div>
    <script>
        // 1. 获取元素
        var btnEl = document.querySelector(".btn")
        var boxEl = document.querySelector(".box")
        // 方法1: classname的方式(但是这种方法会把class的value直接替换掉,所以不推荐使用)
        // boxEl.className = "abc"
        // 方法2: classList
        boxEl.classList.add("abc")
        boxEl.classList.remove("abc")
        btnEl.onclick = function(){
            boxEl.classList.toggle("active")
        }
    </script>
</body>
</html>

11.3 元素的style用法

对于多词使用驼峰式命名

boxEl.style.backgroundColor = "red"
boxEl.style.height = "50px"

如果将值设置为空字符串表示会使用CSS的默认样式

boxEl.style.fontSize = " " 就表示会使用浏览器默认的字体大小16px

11.4 style的读取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="box" style="background-color: #f80;">box元素</div>
    <script>
        var boxEl = document.querySelector(".box")
        // 对于内联样式可以直接读取
        console.log(boxEl.style.backgroundColor)
        // 对于非内联样式，需要通过全局函数getComputerStyle读取
        console.log(getComputedStyle(boxEl).fontSize)
    </script>
</bod

12 创建元素和插入元素

12.1 创建元素

<!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 class="box"></div>
  <script>
    var boxEl = document.querySelector(".box")
    var h2El = document.createElement("h2")
    h2El.classList.add("title")
    h2El.textContent = "我是标题"
    // 将元素插入boxEl
    boxEl.append(h2El)
  </script>
</body>
</html>
![](/i/l/?n=24&i=blog/3186791/202407/3186791-20240710220219276-740521087.png)

## 12.2 移除元素
```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 class="btn">移除box元素</button>
  <div class="box">
    <h2>h2标题</h2>
    <span>段落</span>
  </div>
  <script>
    // 1. 获取元素
    var boxEl = document.querySelector(".box")
    var removeBtn = document.querySelector(".btn")
    // 2. 监听btn的点击
    removeBtn.onclick = function(){
      boxEl.remove()
    }
  </script>
</body>
</html>

12.3 克隆元素

<!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 class="btn">克隆box元素</button>
  <div class="box">
    <h2>h2标题</h2>
    <span>段落</span>
  </div>
  <script>
    // 1. 获取元素
    var boxEl = document.querySelector(".box")
    var removeBtn = document.querySelector(".btn")
    // 2. 监听btn的点击
    removeBtn.onclick = function(){
      // 如果不加参数true，相当于是浅拷贝即并不会克隆该元素的子节点
      var newNode = boxEl.cloneNode(true)
      // 插入到DOM对象中
      boxEl.append(newNode)
    }
  </script>
</body>
</html>

标签：Web,bodyChildnodes,06,元素,boxEl,Document,API,var,document
From： https://www.cnblogs.com/yufc/p/18295107

相关文章

  • 280个地级市金融集聚水平数据（2006-2022年）
    2006年-2022年280个地级市金融集聚水平数据整理资源-CSDN文库金融集聚水平：衡量地级市金融发展的新维度金融集聚水平是衡量一个地区金融发展程度的重要指标，它反映了金融机构、金融资源、金融服务在特定时间和空间的集中程度。这一指标的评估可以从多个维度进行，包括金融机构的......
  • python基础（06while循环+for循环）
    一、循环循环的概念循环语句是一种在程序中多次执行相同代码块的语句。循环的分类在python中，循环分为while和for两种，while循环是一种在满足条件的情况下重复执行代码块的循环，最终实现的效果和for循环相同。总结while循环和for循环本质上没有区别，都是为了实现循环效果w......
  • Ubuntu安装samba和webdav实现共享文件
    samba#安装Sambaaptupdateaptinstallsamba#配置Sambavim/etc/samba/smb.conf##文件末尾添加[share]comment=sharepath=/home/wy/store/sharebrowsable=yesguestok=yesreadonly=nocreatemask=0755#重启Samba服务systemctl......
  • 使用Java9 Flow API进行Reactive Programming
    importjava.util.concurrent.Flow;importjava.util.concurrent.Flow.Publisher;importjava.util.concurrent.Flow.Subscriber;publicclassReactiveExample{publicstaticvoidmain(String[]args){//创建一个发布者，发布一系列的数字Publisher......
  • 智能小程序 Ray 开发门锁 API ——日志 API 接口汇总
    查询最近一条日志记录getLatestLog引入@ray-js/ray^1.5.0以上版本可使用import{getLatestLog}from'@ray-js/ray'参数LatestLogParams属性类型必填说明devIdstring是设备ID返回LatestLogResponse结构包含日志记录的各种详细信息。函数定义示例/***查询......
  • RPC api与Rest api的区别 微服务 正反向代理
    参考链接：https://blog.csdn.net/weixin_43871785/article/details/129922143  RPC：本地化REST：国际化HTTP与RPC的关系就好比国际化与地方化的关系(可以认为标准的国际拳击手和随意的自由拳击手)。要进行跨企业服务调用时，往往都是通过HTTPAPI，虽然效率不高，但是通用，没有......
  • 【打卡】006 P6 VGG-16算法-Pytorch实现人脸识别
    >-**......
  • 常见webshell管理工具流量分析
    1.蚁剑蚁剑设置代理后bp抓包，bp看流量方便一点默认编码器流量分析进入文件管理器的两个数据包：解码后的数据为：7=@ini_set("display_errors","0");@set_time_limit(0);functionasenc($out){return$out;};functionasoutput(){$output=ob_get_contents();ob_end_clean();e......
  • Day3| 203.移除链表元素 & 707.设计链表 & 206.反转链表
    前两天发烧了,这几天没更的后续会补齐链表结构如下classListNode{intval;ListNodenext;ListNode(){}ListNode(intval){this.val=val;}ListNode(intval,ListNodenext){this.val=val;this.next......
  • Java-常用API
    1-JavaAPI：指的就是JDK中提供的各种功能的Java类。2-Scanner基本使用Scanner：一个简单的文本扫描程序，可以获取基本类型数据和字符串数据构造方法：Scanner(InputStreamsource)：创建Scanner对象System.in：对应的是InputStream类型，可以表示键盘输入Scannersc=n......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99