当前位置: 首页 > 编程日记 > 正文

JS的Dom树小结

一【DOM树节点】
DOM节点分为三大类:元素节点、文本节点、属性节点
文本节点、属性节点,为元素节点的两个子节点;
通过getElement系列方法,可以去到元素节点。
二【查看节点】
1、getElementById:通过ID获取唯一的节点;多个同名ID,只会取第一个;
2、getElementsByName:通过Name取到一个数组,包含1到多个节点;
使用方式:通过循环,取到每一个节点。循环次数:从0开始,<数组.length
三【查看和设置属性节点】
1、查看属性节点: getAttribute("属性名");
2、设置属性节点: setAttribute("属性名","属性值");
四【JS修改样式总结】
1、.className : 为元素设置一个新的class名字;
div1.className = "class1";
2、.style : 为元素设置一个新的样式,注意驼峰命名法;
div1.style.backgroundColor = "red";
3、.style.cssText : 为元素同时修改多个样式;
div1.style.cssText = "width:100px;height100px;";
 五【查看节点】
1、tagName属性:获取节点的标签名;
2、innerHTML:设置或者获取节点内部的所有HTML代码;
3、innerText:设置或者获取节点内部的所有文字;
window.onload = function(){
var div1 = document.getElementById("div1");
}
function getById(){
取到元素节点的样式属性节点
var divStyle = document.getElementById("div1").style;/divStyle.backgroundColor = "blue"; 所有节点属性,一律驼峰命名法
取到元素节点
var div = document.getElementById("div1");
console.log(div.innerHTML); //取到div中所有内容
div.innerHTML = "<s>jianghao</s>"; // 重置修改div中的HTML代码
六[获取层次节点的常用属性]
1 .childNodes:(数组)获取元素的所有子节点
2 .firstChild:获取元素的第一个子节点;
3 .lastChild:获取元素的最后一个子节点;
4 .ownerDocument:获取当前文档根节点。在html文档中,为document节点
5 .parentNode:获取当前节点的父节点;
6 .previousSibling:获取当前节点的前一个兄弟节点
7 .nextSibling:获取当前节点的后一个兄弟节点
注:上述属性,均会获得所有的元素节点和文本节点,如果只需要元素节点,需要使用对应Element属性,例如:firstChild--->firstElementChild
8 .attributes:获取当前元素节点的所有属性节点
七【创建并新增节点】
1、.createElement("标签名"): 创建一个新的节点。需要配合.setAttribute()方法设置新节点的相关属性;
2、 .appendChild(节点名): 在某元素的最后追加一个新节点
3、 .insertBefore(新节点名,目标节点名):将新节点,插入到目标节点之前
4、 克隆节点.cloneNode(true/false): 需要克隆谁,就用谁去调用克隆对象;
>>>传递参数可以为true或false:
① true表示:克隆当前节点及所有子节点;
② false表示:只克隆当前节点,不可隆子节点(默认)
【删除/替换节点】
1、 .removeChild(需删除节点):从父容器中,删除指定节点;
2、 .replaceChild(新节点,被替换节点):用新节点替换指定节点。如果新节点为页面中已有节点,会将此节点删除后,替换到指定节点。

转载于:https://www.cnblogs.com/dsmf/p/6719797.html

相关文章:

高考631能上什么好的计算机学校,2021年高考630分能上什么大学 可以报哪些学校...

高考结束后&#xff0c;最重要的事情就是如何填报志愿&#xff0c;高考630分能上什么大学?高考630分可以读哪些专业等等。小编下面就来为大家分享高考630分能上什么大学&#xff0c;供大家参考!!2021年高考630分能上什么理科大学高校名称专业批次平均分最高分中国科学技术大学…

CV00-01-CV基础理论

目录 CV的level和CV的方向 CV的level CV研究方向 CV应用方向 CV工程方向 CV的路线 CV比较好的会议 CV的平台、框架 认识几个CV的缩写 CV的level和CV的方向 CV的level Low Level&#xff0c;图像的基本操作&#xff1b;比如&#xff0c;图像的变换、像素操作、色彩等…

VC++关于UNICODE版本的开发

关于UNICODE版本的开发 代码转换方案 概述 在VC6.0中&#xff0c;相应的有一些宏来代替ANSI的函数、宏或数据类型&#xff0c;这些宏在ANSI编译条件中处理字符串为单字节&#xff0c;而在UNICODE中处理字符串为双字节&#xff0c;请在编写程序中请使用这些宏。 数据类型 表-1.1…

计算机基础办公软件应用技能,计算机一级计算机基础及 ms office 应用考些什么...

一、计基础知识1.计算机的发展、其应用领域。2.计算机中数据的表示、存储与处理。3.多媒体技术的概念与应用。4.计算机病毒的概念、特征、分类与防治。5.计算机网络的概念、组成和分类;计算机与网络信息安全的概念和防控。6.因特网网络服务的概念、原理和应用。二、操作系统的功…

ffmpeg 编译Android

环境 macOS 10.15.4 NDK 21.3.6528147 ffmpeg 4.2.3 1.执行sudo xcodebuild -license&#xff0c;防止编译的时候找不到一些文件报错 2.下载ffmpeg(4.2.3),解压后进入主目录&#xff0c;修改configure文件&#xff0c;找到 SLIBNAME_WITH_MAJOR$(SLIBNAME).$(LIBMAJOR) LI…

Python基础14-迭代器与生成器

目录 迭代器 官方文档对迭代器的解释 迭代器协议 基于迭代器协议的统一的for循环机制 生成器 官方文档对生成器的解释 生成器函数 生成器表达式 生成器用法举例 利用生成器用单线程实现生产者消费者问题模型 生成器只能遍历一次 迭代器 官方文档对迭代器的解释 Thi…

Android学习笔记进阶九之Matrix对称变换

网上很多的倒影特效实际上就是一个对称变换&#xff0c;在改变透明度即可。 Matrix对称变换包括很多种&#xff0c;有关于Y轴对称&#xff0c;关于X轴对称&#xff0c;关于y -x对称等等。 1 关于Y轴对称 [java] view plaincopy// 获取资源文件的引用res Resources res…

《计算机网络应用基础》模拟试卷(六),《计算机与网络应用基础知识1》模拟试卷...

《计算机与网络应用基础知识1》模拟试卷 (4页)本资源提供全文预览&#xff0c;点击全文预览即可全文预览,如果喜欢文档就下载吧&#xff0c;查找使用更方便哦&#xff01;9.9 积分《计算机与网络应用基础知识1》模拟试卷 一考生注意&#xff1a;1&#xff0e;本试卷共五道大题&…

ios架构篇-1 项目组织架构

关键字:项目组织架构 CocoaPod + 多项目级联 + xib + MVVM ProjectApp 项目app project Vendor 第三方.a、.framework库或源码 Resources 项目静态配置文件 Database 数据库文件夹,如CoreData Component 此项目特定的组件 Base 此项目…

Error 0162 - Setup data integrity check failure after updating BIOS via Thinkvantage

Start the computer and start pressing F1 and get into set up. In setup press F9 for default settings and press F10 for svae and exit. Problem solved. 转载于:https://www.cnblogs.com/gaoshaonian/p/9700130.html

CV00-02-CV基本操作1

目录 数字图像属性 opencv-python环境搭建 基本操作I Read in / Show out&#xff0c;读取、显示图像&#xff1b; Change color&#xff0c;修改颜色&#xff1b; Gamma Correction&#xff0c;伽马校正&#xff1b; Crop&#xff0c;切割&#xff1b; Histogram&…

链式表的按序号查找

本题要求实现一个函数&#xff0c;找到并返回链式表的第K个元素。 函数接口定义&#xff1a; ElementType FindKth( List L, int K );其中List结构定义如下&#xff1a; typedef struct LNode *PtrToLNode; struct LNode {ElementType Data;PtrToLNode Next; }; typedef PtrToL…

Codeforces Round #409 (Div. 2) C Voltage Keepsake(二分)

题意&#xff1a;有n(n<100000)个机器。。。第i个机器最开始有bi(1<bi < 100000)个单位的电量&#xff0c;机器可以储存的电量没有上限&#xff0c;启动后每秒消耗ai(1<ai<100000)个单位的电量,有一个充电器每秒可以充p(1<p<1e9)的电量。求保持所有机器电…

电子计算机的发展与应用教案,川教版信息技术七上第3课《电子计算机的发展与应用》教案1.doc...

川教版信息技术七上第3课《电子计算机的发展与应用》教案1整理双流县中学现代课堂教学分课时教学设计课题第3课 计算机的发展与应用课时1课型新课教学目标知识与能力&#xff1a;了解计算机的产生和发展&#xff0c;了解我国计算机的发展状况&#xff0c;计算机的特点与具体应用…

ios架构篇-2 国际化多语言

关键字:ios,国际化,多语言 实现功能: 1.默认采用系统语言 2.语言切换后实时生效 3.支持中英文,包含页面、app名称、系统默认权限弹框(如相机相册权限) 思路:app首次初始设置为系统语言,用户在app内切换语言时发送语言切换通知,刷新所有页面 1.project增加需要支持的…

Python基础15-函数闭包与装饰器

目录 装饰器概念 装饰器的实现 修改被装饰函数的代码&#xff08;非装饰器实现&#xff09; 修改被装饰函数的调用方式&#xff08;非装饰器实现&#xff09; 装饰器的实现&#xff08;不完整的实现level1&#xff09; 装饰器实现的语法糖&#xff08;不完整的实现level2…

python 全栈开发,Day132(玩具管理页面,控制玩具通讯录,基于请求的好友关系建立)...

先下载github代码&#xff0c;下面的操作&#xff0c;都是基于这个版本来的&#xff01; https://github.com/987334176/Intelligent_toy/archive/v1.5.zip 注意&#xff1a;由于涉及到版权问题&#xff0c;此附件没有图片和音乐。请参考链接&#xff0c;手动采集一下&#xff…

iOS技术篇1-CocoaPods

iOS技术篇1-CocoaPods 上一篇: 目录 下一篇&#xff1a;ios技术篇2-CoreData

计算机艺术未来发展趋势,计算机技术对现代艺术设计的影响

摘 要 在当今&#xff0c;计算机技术已经覆盖到了全球生活的各个领域&#xff0c;毫不夸张地说&#xff0c;计算机技术已经成为世界上最重要的技术之一。计算机技术对于某些行业和领域的冲击是巨大的&#xff0c;甚至是革命性的改变&#xff0c;它能够使很多的活动变得更为便捷…

【JZOJ5064】【GDOI2017第二轮模拟day2】友好城市 Kosarajo算法+bitset+ST表+分块

题面 在Byteland 一共有n 座城市&#xff0c;编号依次为1 到n&#xff0c;这些城市之间通过m 条单向公路连接。 对于两座不同的城市a 和b&#xff0c;如果a 能通过这些单向道路直接或间接到达b&#xff0c;且b 也能如此到达a&#xff0c;那么它们就会被认为是一对友好城市。 By…

Python基础16-模块与包基础01

目录 初识模块和包 Python常用的内置模块 关键字import和from import、from查找的路径 如何调用 __name__与模块执行 __name__的用法&#xff08;单元测试&#xff09; 初识模块和包 我们把功能相近或相关的py文件组成模块&#xff0c;这样分开写代码便于维护&#xff0c…

配置用户通过Telnet登录设备的身份认证(AAA本地认证)

背景信息 用户通过Telnet登录设备时&#xff0c;设备上必须配置验证方式&#xff0c;否则用户无法成功登录设备。设备支持不认证、密码认证和AAA认证三种用户界面的验证方式&#xff0c;其中AAA认证方式安全性最高。 采用AAA本地认证方式实现用户通过Telnet登录设备的身份认证&…

【自考】信息系统开发与管理(二)——章节详读

自考的第二阶段结束了&#xff0c;这一阶段是对书的详读过程。每章节读完&#xff0c;画一个导图。将其总结成一张网。织网的过程就是思考的过程。织网不断进行中……&#xff01;宏观方面&#xff1a;&#xff11;&#xff5e;&#xff13;章第一章 管理信息系统导论在研究一…

ios技术篇-CoreData

ios技术篇-CoreData 上一篇: iOS技术篇-CocoaPods 目录 下一篇&#xff1a;

中山大学计算机学院运动会,喜讯!我院获2019中大校运会教工组团体第二名

11月2日&#xff0c;中山大学2019年运动会在南校园举行&#xff0c;来自全校68个院系、附属医院、部门共3200余名师生参加比赛。由37名职工运动员组成的中山七院代表队参加教工组田径赛、趣味田径及球类等全部15项比赛&#xff0c;经过激烈角逐&#xff0c;最终以团体总分173分…

Python基础17-模块与包基础02、常用模块之time、random

目录 名字冲突与避免 设置BASE_DIR保证程序能找到模块位置 time random 名字冲突与避免 在test.py里写下面一段代码&#xff0c;用正则表达式包re进行匹配&#xff0c;匹配出123开头的字符。如果我们在test.py同级写一个re.py&#xff0c;那么Python解释器在进行导入时就会…

Hadoop学习笔记(1) ——菜鸟入门

&#xfeff;&#xfeff;Hadoop学习笔记(1) ——菜鸟入门 Hadoop是什么&#xff1f;先问一下百度吧&#xff1a; 【百度百科】一个分布式系统基础架构&#xff0c;由Apache基金会所开发。用户能够在不了解分布式底层细节的情况下。开发分布式程序。充分利用集群的威力进行快…

HTTP协议简介

HTTP协议HTTP协议简介 超文本传输协议&#xff08;英文&#xff1a;HyperText Transfer Protocol&#xff0c;缩写&#xff1a;HTTP&#xff09;是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是万维网的数据通信的基础。 HTTP的发展是由蒂姆伯纳斯-李于1989年在…

计算机组成原理读写周期波形图,第3章存储器层次结构-1讲述.ppt

第3章存储器层次结构-1讲述计算机组成原理 * 计算机组成原理 ——存储器层次结构(1) 2016-3-18 几个基本概念 1、存储器&#xff1a;计算机系统中的记忆设备&#xff0c;用来存放程序和数据。 2、存储元&#xff1a;存储器的最小组成单位&#xff0c;用以存储1位二进制代码。 3…

iOS架构篇-4 架构模式MVVM

iOS架构篇-4 架构模式MVVM MVVM原理MVVM 登录例子View:ViewModel:Model:如果觉得可以就点个👍吧,欢迎粉丝收藏,土豪打赏,您的关注就是我们创作的动力!读者有什么想看的相关技术篇章,欢迎评论留言!QQ交流群:908058499MVVM原理 #mermaid-svg-s6n4t9QkR9OeNy45 .label{fon…