API-节点操作

学习目标:

  • 掌握节点操作

学习内容:

  1. DOM节点
  2. 查找节点
  3. 增加节点
  4. 删除节点

DOM节点:

DOM树里每一个内容都称之为节点。

在这里插入图片描述

  • 节点类型
元素节点所有的标签比如body、div;html是根节点
属性节点所有的属性,比如href
文本节点所有的文本
其他-
  • 小结
  1. 什么是DOM节点?

    DOM树里每一个内容都称之为节点。
    
  2. DOM节点的分类?

    元素节点 :比如div标签。
    属性节点:比如class属性。
    文本节点:比如标签里面的文字。
    
  3. 我们重点记住哪个节点?

    元素节点。
    可以更好的让我们理清标签元素之间的关系。
    

查找节点:

  • 节点关系:针对的找亲戚返回的都是对象。
  • 父节点查找:

parentNode属性

返回最近一级的父节点 ,找不到返回为null。

子元素.parentNode
<title>查找节点-父节点</title>
</head><body><div class="yeye"><div class="dad"><div class="baby">X</div></div></div><script>const baby = document.querySelector('.baby')console.log(baby) // 返回dom对象console.log(baby.parentNode) // 返回dom对象   爸爸 console.log(baby.parentNode.parentNode) //返回dom对象  爷爷</script></body>
  • 练习:
 <title>练习-关闭二维码案例</title><style>.box {position: relative;width: 1000px;height: 200px;background-color: pink;margin: 100px auto;text-align: center;font-size: 50px;line-height: 200px;font-weight: 700;}.box1 {position: absolute;right: 20px;top: 10px;width: 20px;height: 20px;background-color: skyblue;text-align: center;line-height: 20px;font-size: 16px;cursor: pointer;}</style>
</head><body><div class="box">我是广告<div class="box1">X</div></div><div class="box">我是广告<div class="box1">X</div></div><div class="box">我是广告<div class="box1">X</div></div><script>// //1.获取事件源// const box1 = document.querySelector('.box1')// //2.事件侦听// box1.addEventListener('click', function () {//   this.parentNode.style.display = 'none'// })//1.获取三个关闭按钮const closeBtn = document.querySelectorAll('.box1')for (let i = 0; i < closeBtn.length; i++) {closeBtn[i].addEventListener('click', function () {//关闭我的爸爸,所以只关闭当前的父元素this.parentNode.style.display = 'none'})}</script></body>
  • 子节点查找:

childNode:获得所有子节点、包括文本节点(空格、换行)、注释节点等。

children属性(重点)

  1. 仅获得所有元素节点。
  2. 返回的还是一个伪数组。
父元素.children
<title>查找节点-子节点</title>
</head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul><script>const ul = document.querySelector('ul') //ulconsole.log(ul.children)  //得到伪数组  选择的是 亲儿子</script></body>
  • 兄弟关系查找:
下一个兄弟节点nextElementSibling属性
上一个兄弟节点previousElementSibling 属性
<title>查找节点-子节点</title>
</head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul><script>// const ul = document.querySelector('ul') //ul// console.log(ul.children)  //得到伪数组  选择的是 亲儿子const li2 = document.querySelector('ul li:nth-child(2)')console.log(li2.previousElementSibling) //上一个兄弟console.log(li2.nextElementSibling) //下一个兄弟</script></body>
  • 小结
  1. 查找父节点用哪个属性?

    parentNode
    
  2. 查找所有子节点用哪个属性?

    children
    
  3. 查找兄弟节点用哪个属性?

    nextElementSibling
    previousElementSibling
    

增加节点:

很多情况下,我们需要在页面中增加元素。

比如,点击发布按钮,可以新增一条信息。

一般情况下,我们新增节点,按照如下操作:

创建一个新的节点。
把创建的新的节点放入到指定的元素内部。
  • 创建节点

即创造出一个新的网页元素,再添加到网页内,一般先创建节点,然后插入节点。

创建元素节点方法:

//创造一个新的元素节点
document.createElement('标签名')
<title>增加节点</title>
</head><body><ul><li>我是老大</li></ul><script>//1.创建节点const div = document.createElement('div')console.log(div)</script></body>
  • 追加节点

要想在界面看到,还得插入到某个父元素中。

插入到父元素的最后一个子元素:

//插入到这个父元素的最后
父元素.appendChild(要插入的元素)

插入到父元素中某个子元素的前面:

//插入到某个子元素的前面
父元素.insertBefore(插入的元素,放到哪个元素的前面)
<title>增加节点</title>
</head><body><ul><li>我是老大</li></ul><script>//1.创建节点// const div = document.createElement('div')// console.log(div)//2.追加节点  作为最后一个子元素// document.body.appendChild(div)const ul = document.querySelector('ul')const li = document.createElement('li')li.innerHTML = '我是li'// ul.appendChild(li)// ul.children//3.追加节点// insertBefore(插入的元素,放到哪个元素的前面)ul.insertBefore(li, ul.children[0])</script></body>
  • 克隆节点

特殊情况下,我们新增节点,按照以下操作:

复制一个原有的节点。
把复制的节点放入到指定的元素内部。
//克隆一个已有的元素节点
元素.cloneNode(布尔值)

cloneNode会克隆出一个跟原标签一样的元素,括号内传入布尔值。

若为true代表克隆时会包含后代节点一起克隆
若为false代表克隆时不包含后代节点
默认为false-
<title>克隆节点</title>
</head><body><ul><li>1</li><li>2</li><li>3</li></ul><script>const ul = document.querySelector('ul')//1.克隆节点  元素.cloneNode(true)const li1 = ul.children[0].cloneNode(true)// console.log(li1)//2.追加ul.appendChild(li1)</script></body>

删除节点:

若一个节点在页面中已不需要,可以删除它。

在JavaScript原生DOM操作中,要删除元素必须通过父元素删除

父元素.removeChild(要删除的元素)

注意:

  1. 如不存在父子关系则删除不成功。

  2. 删除节点和隐藏节点(display: none)有区别的:

    隐藏节点还是存在的,但是删除,则从html中删除节点。
    
<title>删除节点</title><style>.box {display: none;}</style>
</head><body><div class="box">123</div><ul><li>没用了</li></ul><script>const ul = document.querySelector('ul')//删除节点 父元素.removeChild(子元素)ul.removeChild(ul.children[0])</script></body>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/37793.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FastAPI-Cookie

fastapi-learning-notes/codes/ch01/main.py at master Relph1119/fastapi-learning-notes GitHub 1、Cookie的作用 Cookie可以充当用户认证的令牌&#xff0c;使得用户在首次登录后无需每次手动输入用户名和密码&#xff0c;即可访问受限资源&#xff0c;直到Cookie过期或…

《PyTorch计算机视觉实战》:一、二章

目录 第一章&#xff1a;人工神经网络基础 比较人工智能和传统机器学习 人工神经网络&#xff08;Artificial Neural Network&#xff0c;ANN&#xff09; 是一种受人类大脑运作方式启发而构建的监督学习算法。神经网络与人类大脑中神经元连接和激活的方式比较类似&#xff0…

mysql查看用户的过期时间

1. mysql查看用户的过期时间的方法 在MySQL中&#xff0c;用户的过期时间&#xff08;也称为账户过期日期&#xff09;是一个可选项&#xff0c;用于确定某个MySQL用户账户何时到期。但是&#xff0c;值得注意的是&#xff0c;并非所有的MySQL安装或版本都支持直接设置用户账户…

GoLang语言

基础 安装Go扩展 go build 在项目目录下执行go build go run 像执行脚本文件一样执行Go代码 go install go install分为两步&#xff1a; 1、 先编译得到一个可执行文件 2、将可执行文件拷贝到GOPATH/bin Go 命令 go build :编译Go程序 go build -o "xx.exe"…

CSS元素之间的空白问题:原因与解决方案

在网页设计中&#xff0c;CSS元素之间的空白是一个常见但往往不易察觉的问题。空白不仅影响布局的准确性&#xff0c;还可能破坏设计的整体美感。本文将探讨元素之间空白的产生原因&#xff0c;并提供有效的解决方案。 空白产生的根源 空白问题主要发生在行内元素和行内块元素…

4.x86游戏实战-人物状态标志位

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 本次游戏没法给 内容参考于&#xff1a;微尘网络安全 上一个内容&#xff1a;3.x86游戏实战-寄存器 人物状态标志位&#xff1a; 什么叫人物状态标志位&…

力扣刷题--3168. 候诊室中的最少椅子数【简单】

题目描述 给你一个字符串 s&#xff0c;模拟每秒钟的事件 i&#xff1a; 如果 s[i] ‘E’&#xff0c;表示有一位顾客进入候诊室并占用一把椅子。 如果 s[i] ‘L’&#xff0c;表示有一位顾客离开候诊室&#xff0c;从而释放一把椅子。 返回保证每位进入候诊室的顾客都能有…

Leetcode[反转链表]

LCR 024. 反转链表 给定单链表的头节点 head &#xff0c;请反转链表&#xff0c;并返回反转后的链表的头节点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1]示例 2&#xff1a; 输入&#xff1a;head [1,2] 输出&#xff1a;[2,1]示…

Go使用Gin框架开发的Web程序部署在Linux时,无法绑定监听Ipv4端口

最近有写一部分go语言开发的程序&#xff0c;在部署程序时发现&#xff0c;程序在启动后并没有绑定ipv4的端口&#xff0c;而是直接监听绑定ipv6的端口。 当我用netstat -antup | grep 3601查找我的gin服务启动的端口占用情况的时候发现&#xff0c;我的服务直接绑定了tcp6 &a…

240629_昇思学习打卡-Day11-Vision Transformer中的self-Attention

240629_昇思学习打卡-Day11-Transformer中的self-Attention 根据昇思课程顺序来看呢&#xff0c;今儿应该看Vision Transformer图像分类这里了&#xff0c;但是大概看了一下官方api&#xff0c;发现我还是太笨了&#xff0c;看不太明白。正巧昨天学SSD的时候不是参考了太阳花的…

LeetCode.30 串联所有单词的子串

问题描述 给定一个字符串 s 和一个字符串数组 words。 words 中所有字符串 长度相同。 s 中的 串联子串 是指一个包含 words 中所有字符串以任意顺序排列连接起来的子串。 例如&#xff0c;如果 words ["ab","cd","ef"]&#xff0c; 那么 &q…

MySQL Workbench支持哪些数据库版本的连接?

MySQL Workbench支持哪些数据库版本的连接&#xff1f; MySQL Workbench 是一款强大的数据库管理和设计工具&#xff0c;它支持连接多种版本的 MySQL 数据库。包括但不限于&#xff1a; MySQL 官方发行的所有版本&#xff0c;从 MySQL 5.0 到最新的 MySQL 8.x 和更高版本。 M…

Linux - 札记 - W10: Warning: Changing a readonly file

Linux - 札记 - W10: Warning: Changing a readonly file 这里写目录标题 一、问题描述1. 现象2. 原因 二、解决方案 一、问题描述 1. 现象 在使用 vim 编辑文件时&#xff08;我这里是要编辑 /root/.ssh/authorized_keys&#xff09;提示&#xff1a;W10: Warning: Changing…

【论文+代码|已完结】基于人工智能的图像识别技术在医疗诊断中的应用

基于人工智能的图像识别技术在医疗诊断中的应用 摘要&#xff1a;随着人工智能技术的飞速发展&#xff0c;图像识别技术在医疗领域的应用日益广泛。本毕业设计旨在研究基于人工智能的图像识别技术在医疗诊断中的应用&#xff0c;通过对大量医疗图像数据的分析和处理&#xff0…

IOS Swift 从入门到精通:ios 连接数据库 安装 Firebase 和 Firestore

创建 Firebase 项目 导航到Firebase 控制台并创建一个新项目。为项目指定任意名称。 在这里插入图片描述 下一步,启用 Google Analytics,因为我们稍后会用到它来发送推送通知。 在这里插入图片描述 在下一个屏幕上,选择您的 Google Analytics 帐户(如果已创建)。如果没…

<电力行业> - 《第7课:发电》

1 发电的原理 电力生产的发电环节是利用电能生产设备将各种一次能源或其他形式的能转换为电能。生产电能的主要方式有火力发电、水力发电、核能发电、地热发电、风力发电、太阳能发电、潮汐能发电、生物智能发电和燃料电池发电等。 除太阳能发电的光伏电池技术和燃料电池发电…

c++ 子类继承父类

这个是子类继承父类 是否重写从父类那里继承来的函数 这个例子的路径 E盘 demo文件夹 fatherChildfunc

蓝卓出席“2024C?O大会”,探讨智能工厂建设新路径

6月29日&#xff0c;“2024C?O大会”在金华成功举办。此次大会由浙江省企业信息化促进会主办&#xff0c;与以往CIO峰会不同&#xff0c;“C?O”代表了企业数字化中的核心决策者群体&#xff0c;包括传统的CIO、CEO、CDO等。 本次大会围绕C?O、AIGC与制造业、数据价值、未来…

统计信号处理基础 习题解答11-9

一个飞行器开始于一个未知位置(, )&#xff0c;按照 以常速运动&#xff0c;其中, 分别是飞行器在x、y方向的速度分量,都是未知的。我们希望估计每一时刻, 飞行器的位置和速度。尽管初始位置(, )和速度, 都是未知的,但是它们可以看成一个随机矢量。证明能够由MMSE估计器估计为 …

libarclite_iphonesimulator.a‘; try increasing the minimum deployment target

1. Xcode 15 编译出现以下错误 clang: error: SDK does not contain libarclite at the path /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/lib/arc/libarclite_iphonesimulator.a; try increasing the minimum deployment ta…