HTML DOM 入门知识点总结，985研究生入职电网6个月

最新推荐文章于 2021-09-06 09:38:07 发布
最新推荐文章于 2021-09-06 09:38:07 发布
阅读量61 收藏
点赞数
分类专栏： 程序员 文章标签： java jquery html 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60607838/article/details/119966487
版权 



[](https://codechina.csdn.net/m0_60958482/java-p7)获取节点

-----------------------------------------------------------------------



代码：[html\_dom - 获取节点](https://codechina.csdn.net/m0_60958482/java-p7)



*   [getElementById](https://codechina.csdn.net/m0_60958482/java-p7) 通过 **id** 获取元素节点

*   [getElementsByTagName](https://codechina.csdn.net/m0_60958482/java-p7) 通过**标签名称**获取元素节点

*   [getElementsByClassName](https://codechina.csdn.net/m0_60958482/java-p7) 通过**类名**获取元素节点

*   [getElementsByName](https://codechina.csdn.net/m0_60958482/java-p7) 通过**表单元素的 name** 获取元素节点

*   [attributes](https://codechina.csdn.net/m0_60958482/java-p7) 获取属性节点

*   [childNodes](https://codechina.csdn.net/m0_60958482/java-p7) 获取内容节点



[](https://codechina.csdn.net/m0_60958482/java-p7)节点的属性

------------------------------------------------------------------------



代码：[html\_dom - 节点的属性](https://codechina.csdn.net/m0_60958482/java-p7)



*   [nodeName](https://codechina.csdn.net/m0_60958482/java-p7) 节点名称

*   [nodeValue](https://codechina.csdn.net/m0_60958482/java-p7) 节点值

*   [nodeType](https://codechina.csdn.net/m0_60958482/java-p7) 节点类型

*   [innerHTML](https://codechina.csdn.net/m0_60958482/java-p7) 元素的文本内容

*   [id value className](https://codechina.csdn.net/m0_60958482/java-p7) 元素上的属性



练习：



*   [切换不同的图片](https://codechina.csdn.net/m0_60958482/java-p7)

*   [判断输入框的值是否是整数](https://codechina.csdn.net/m0_60958482/java-p7)

*   [验证账号是否存在](https://codechina.csdn.net/m0_60958482/java-p7)



[](https://codechina.csdn.net/m0_60958482/java-p7)样式

---------------------------------------------------------------------



一个元素节点的 style 属性即对应的 css，代码：[html\_dom - 样式](https://codechina.csdn.net/m0_60958482/java-p7)



*   [d.style.display](https://codechina.csdn.net/m0_60958482/java-p7) 隐藏和显示

*   [d.style.backgroundColor](https://codechina.csdn.net/m0_60958482/java-p7) 改变背景色

    

    > css 属性名是 “background-color”，这里是 “backgroundColor”。 [jQuery](https://codechina.csdn.net/m0_60958482/java-p7) 可以用 css 属性名操作样式

    



练习：[表格斑马线](https://codechina.csdn.net/m0_60958482/java-p7)



[](https://codechina.csdn.net/m0_60958482/java-p7)事件

---------------------------------------------------------------------



代码：[html\_dom - 事件](https://codechina.csdn.net/m0_60958482/java-p7)



*   [onfocus、onblur](https://codechina.csdn.net/m0_60958482/java-p7) 焦点事件

*   [onmousedown、onmouseup、onmousemove、onmouseout](https://codechina.csdn.net/m0_60958482/java-p7) 鼠标事件

*   [onkeydown、onkeypress、onkeyup](https://codechina.csdn.net/m0_60958482/java-p7) 键盘事件

*   [onclick、ondblclick](https://codechina.csdn.net/m0_60958482/java-p7) 点击事件

*   [onchange](https://codechina.csdn.net/m0_60958482/java-p7) 变化事件

*   [onsubmit](https://codechina.csdn.net/m0_60958482/java-p7) 提交事件

*   [onload](https://codechina.csdn.net/m0_60958482/java-p7) 加载事件

*   [this](https://codechina.csdn.net/m0_60958482/java-p7) 当前组件

*   [οnsubmit=“return false”](https://codechina.csdn.net/m0_60958482/java-p7) 阻止事件的发生



练习：



*   [下拉菜单](https://codechina.csdn.net/m0_60958482/java-p7)

*   [选中所有 checkbox](https://codechina.csdn.net/m0_60958482/java-p7)

*   [验证账号是否存在](https://codechina.csdn.net/m0_60958482/java-p7)



[](https://codechina.csdn.net/m0_60958482/java-p7)HTML DOM 节点关系

================================================================================



[](https://codechina.csdn.net/m0_60958482/java-p7)基本概念

-----------------------------------------------------------------------



代码：[html\_dom - 节点关系 - 基本概念](https://codechina.csdn.net/m0_60958482/java-p7)




<div id="d1">第一个div</div>

<div id="d2">第二个div</div>

<div id="d3">第三个div</div>




以上代码对应的元素节点关系如下图：



> parentDiv 的 children 是 d1 d2 d3



![在这里插入图片描述](https://img-blog.csdnimg.cn/20210704004322113.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_16,color_FFFFFF,t_70)



*   [parentNode](https://codechina.csdn.net/m0_60958482/java-p7) 父节点

*   [previousSibling、nextSibling](https://codechina.csdn.net/m0_60958482/java-p7) 同胞节点

*   [firstChild、lastChild、childNodes](https://codechina.csdn.net/m0_60958482/java-p7) 子节点  

    childNodes 和 children 都可以获取一个元素节点的子节点  

    childNodes 会包含**文本节点**  

    children 会排除**文本节点**



[](https://codechina.csdn.net/m0_60958482/java-p7)创建节点

-----------------------------------------------------------------------



代码：[html\_dom - 节点关系 - 创建节点](https://codechina.csdn.net/m0_60958482/java-p7)



*   [createElement](https://codechina.csdn.net/m0_60958482/java-p7) 创建元素节点

*   [createTextNode](https://codechina.csdn.net/m0_60958482/java-p7) 创建文本节点

*   [createAttribute](https://codechina.csdn.net/m0_60958482/java-p7) 创建属性节点



练习：[动态创建一个表](https://codechina.csdn.net/m0_60958482/java-p7)



[](https://codechina.csdn.net/m0_60958482/java-p7)删除节点

-----------------------------------------------------------------------



代码：[html\_dom - 节点关系 - 删除节点](https://codechina.csdn.net/m0_60958482/java-p7)



*   [removeChild](https://codechina.csdn.net/m0_60958482/java-p7) 删除元素节点

*   [removeAttribute](https://codechina.csdn.net/m0_60958482/java-p7) 删除属性节点

*   [removeChild、innerHTML](https://codechina.csdn.net/m0_60958482/java-p7) 删除文本



[](https://codechina.csdn.net/m0_60958482/java-p7)替换节点

-----------------------------------------------------------------------



[replaceChild](https://codechina.csdn.net/m0_60958482/java-p7) 替换节点



[](https://codechina.csdn.net/m0_60958482/java-p7)插入节点



### 最后

> **面试题文档来啦，内容很多，485页！**
>
> **由于笔记的内容太多，没办法全部展示出来，下面只截取部分内容展示。有想获取完整版笔记的朋友，[点赞后点击这里免费领取哦](https://codechina.csdn.net/m0_60958482/java-p7)**

# 1111道Java工程师必问面试题

![](https://img-blog.csdnimg.cn/img_convert/6bcd2b43cf71cae7ecf3bc39ecb8b505.png)

**MyBatis 27题 + ZooKeeper 25题 + Dubbo 30题：**

![](https://img-blog.csdnimg.cn/img_convert/ac315279d11e6a5770d80bbaaf9151a8.png)

**Elasticsearch 24 题 +Memcached +** **Redis 40题：**

![](https://img-blog.csdnimg.cn/img_convert/b676212a0e3670e3c854812b83b5b90b.png)

**Spring 26 题+ 微服务 27题+ Linux 45题：**

![](https://img-blog.csdnimg.cn/img_convert/4fb582109a18f8289982722c04a8f638.png)

**Java面试题合集：**

oKeeper 25题 + Dubbo 30题：**

[外链图片转存中...(img-suoRldkX-1630124451484)]

**Elasticsearch 24 题 +Memcached +** **Redis 40题：**

[外链图片转存中...(img-KWxdvQ6g-1630124451485)]

**Spring 26 题+ 微服务 27题+ Linux 45题：**

[外链图片转存中...(img-0hFSeYb5-1630124451487)]

**Java面试题合集：**

![](https://img-blog.csdnimg.cn/img_convert/62eff170f7fca31b2b4ca900a8398f37.png)
程序员就等你
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript入门系列之知识点总结
10-22
本文将总结JavaScript的入门知识点，帮助初学者快速理解和掌握这门语言。 首先，我们了解JavaScript的基本特性。JavaScript是一种动态类型语言，这意味着变量的类型可以在运行时改变。它也是弱类型语言，允许变量在...
前端开发开发入门技巧点以及教程知识点总结.docx
最新发布
04-07
前端开发入门阶段，需要掌握的关键知识点主要包括以下几个方面： HTML (HyperText Markup Language) 理解HTML文档的基本结构，例如<!DOCTYPE>, <html>, , 等元素。 学习和使用常见的HTML标签，如标题标签（至）、...
jQuery基础知识点总结(必看)
11-22
在本文中，我们将深入探讨 jQuery 的基础知识点，包括 jQuery 入口函数与 JavaScript 入口函数的区别、jQuery 对象与 DOM 对象的相互转换以及 jQuery 的选择器。 1. **jQuery 入口函数与 JavaScript 入口函数的区别...
2023年web前端开发知识点总结.docx
11-07
"2023年web前端开发知识点总结" HTML知识点总结： 1. HTML基本结构：HTML文档的基本结构包括文档类型声明、HTML元素、head元素和body元素。 2. HTML元素：HTML元素分为块级元素和内联元素两种，常见的块级元素有h1...
HarmonyOS与Android的全面对比，腾讯T3大牛亲自教你
m0_60607838的博客
08-28 1655
文章观点： HarmonyOS并不是Android的替代品，HarmonyOS与Android并非同一个赛道 HarmonyOS目前缺乏生态支持这一点远远比不上Android，但是HarmonyOS的战略眼光更加高，未来可期 HarmonyOS相比Android有一定的性能提升 2.2 系统定位 **安卓（Android）：**是一种基于Linux内核（不包含GNU组件）的自由及开放源代码的操作系统。主要使用于移动设备，如智能手机和平板电脑，由美国Google公司和开放手机联盟领导及开发。
java中main函数调用main函数自己（递归(1)，带你全面掌握高级知识点
m0_60607838的博客
08-27 624
main(args); 二、举例： ==================================================================== public static void main(String[] args) { int a=new Random().nextInt(100)+1; //1-100 System.out.println(a); //输出a if (a<10) System.
Element-UI + Vue，孙鑫Java视频教程百度网盘
m0_60607838的博客
09-05 538
}, }, } []( )分页功能的实现 ========================================================================== mysql 分页查询： SELECT id, name, bir, sex, address FROM t_user LIMIT #{start}, #{rows} 后端控制器： @RestController @RequestMapping("/user")..
Java-TypeToken原理及泛型擦除，Java高级程序员面试笔记宝典
m0_60607838的博客
08-27 429
Type mySuperClass = foo.getClass().getGenericSuperclass(); Type type = ((ParameterizedType)mySuperClass).getActualTypeArguments()[0]; System.out.println(type); 分析一下这段代码，Class类的getGenericSuperClass()方法的注释是： > “ > Returns the Type representing
发量能决定一个程序员的水平吗，Java开课吧百度云
m0_60607838的博客
08-11 318
上面这位，Guido Van Rossum，Python之父。 在 Python 社区，Guido Van Rossum 被人们认为是 “仁慈的独裁者（BDFL）”，因为他仍然关注并监督着 Python 的开发进程，并在必要的时刻做出决策。 从 2005 年到 2012 年，他在谷歌工作，在那里他负责开发 Python 编程语言，然后在 2013 年离开谷歌在 Dropbox 工作。 上面这几位在编程界都是响当当的人物，观察一下，发现除了Guido Van Rossum，其他几位都有或多或少的秃头。可以看.
史上最全Git命令学习：从基础出发，Java中高级面试题总结(全面)
m0_60607838的博客
08-11 316
将暂存区的文件提交本地仓库； 将本地仓库的文件推送到远程仓库； Git文件的四种状态 根据一个文件是否已加入版本控制，可以把文件状态分为：Tracked(已跟踪)和Untracked(未跟踪)，而tracked(已跟踪)又包括三种工作状态：Unmodified，Modified，Staged Untracked: 文件还没有加入到git库，还没参与版本控制，即未跟踪状态。这时候的文件，通过git add 状态，可以变为Staged状态 Unmodified：文件已经加入git库, 但是呢，还没修改,.
2021最新Java面试真题解析，【Java知识点详解 3】序列化与反序列化
m0_60607838的博客
09-04 315
素小暖：what？还有感悟？ 一、基本概念 ====== 1、序列化和反序列化定义 Java序列化是指把Java对象转换为字节序列的过程。 Java反序列化是指把字节序列恢复为Java对象的过程。 2、序列化和反序列化的作用 （1）序列化作用 在传递和保存对象时，保存对象的完整性和可传递性。 对象转换为有序字节流，可以在网络上传输或者保存在本地文件（一般json/xml文件居多）中。 （2）反序列化作用 根据字节流中保存的对象状态及描述信息，通过反序列化重建对象。 二、序列化和反序列化的优缺点 ==
Java中遍历Map集合的5种方式总结(1)，Java高级程序员必备技能
m0_60607838的博客
08-27 314
map.put(001, “Java”); map.put(002, “数据库”); map.put(003, “Vue”); System.out.println(map); // 通过Map.keySet使用iterator遍历key,然后通过key得到对应的value值 Iterator iterator = map.keySet().iterator(); while (iterator.hasNext()) { Integer key = iterator.next(); String value
Docker容器重启慢？快来看看这些优雅终止方案，netty视频教程百度云
m0_60607838的博客
09-05 272
init 以守护进程方式存在，是所有其他进程的祖先。 它主要负责： 启动守护进程 回收孤儿进程 将操作系统信号转发给子进程 1. Docker 容器停止过程 对于容器来说，init 系统不是必须的，当你通过命令 docker stop mycontainer 来停止容器时，docker CLI 会将 TERM 信号发送给 mycontainer 的 PID 为 1 的进程。 如果 PID 1 是 init 进程 - .
HashMap转JavaBean(1)，2021吊打面试官系列
m0_60607838的博客
08-28 258
} } return obj; } ### 2、方式一升级款 //map转换成Bean，只要Map键和JavaBean属性名一致即可，解决mapToBean因为单个首字母大写，映射找不到属性的问题 public static <T, V> T mapToBeanByField(Map<String,V> map,Class clz) throws Exception{ T obj = clz.newInstance(); Field field = null;.
flex 布局详解，小白看完都学会了
m0_60607838的博客
09-03 247
设置 display 属性为 flex 或者 inline-flex 可以成为 flex container display: flex： flex container 以 block-level 形式存在 display: inline-flex： flex container 以 inline-level 形式存在 应用在 flex container 上的 CSS 属性： flex-flow flex-direction flex-wrap justify-content
Java中类创建对象时的代码执行顺序，springboot项目实战视频
m0_60607838的博客
08-27 199
（一）代码执行顺序 { (1) 父类的静态属性初始化和静态代码块 (2) 子类的静态属性初始化和静态代码块 (3) 父类普通属性初始化和普通代码块 (4) 父类构造器显示代码 (5) 子类普通属性初始化和普通代码块 (6) 子类构造器显示代码 } 即 (1) 先加载类 ① 加载父类:父类的静态 ② 加载子类本身:子类本身的静态 (2) 创建对象 ① 加载父类非静态 ② 加载父类构造器自身内部代码 ③ 加载子类非静
ElasticSearch集群的概念及搭建过程，一条正确的Java职业生涯规划
m0_60607838的博客
09-05 198
| red | 不是所有的主要分片都可用 | | 集群的搭建 1. 准备三台elasticsearch服务器 创建elasticsearch-cluster文件夹，在内部复制三个elasticsearch服务 删除data中的数据：应为我们是直接复制的文件，所以每个文件中的data都是一样的，这样会导致数据不同步的问题 2. 修改每台服务器配置 修改elasticsearch-cluster\node*\config\elasticsearch.yml配置文件 node1节点： #节点1的配
2021最新Java笔试题及答案，SpringBoot Admin2
m0_60607838的博客
09-04 189
整体工程修改自 SBA 开源项目的 example 工程，具体使用 custom-ui 的工程链接为：[spring-boot-admin-sample-custom-ui]_，_红色框的部分是 arthas web console 的全部静态文件，通过 Maven Resource 的指定配置打入指定目录，实现 SBA 启动时的自定义加载。maven resource 配置–下： <resource> <directory>static&lt..
HTTP-2做错了什么，Java开发基础不牢
m0_60607838的博客
09-06 188
虽然在HTTP/1.1的基础上推出HTTP/2大大的提升了效率，但是还是有很多人认为这只是个"临时方案"，这也是为什么刚刚推出没多久，业内就开始大力投入HTTP/3的研发与推广了。 而这背后的深层次原因也正是因为他还是基于TCP协议实现的。TCP协议虽然更加可靠，但是还是存在着一定的问题，接下来具体分析下。 HTTP/2 问题 队头阻塞 队头阻塞翻译自英文head-of-line blocking，这个词并不新鲜，因为早在HTTP/1.1时代，就一直存在着队头阻塞的问题。 但是很多人在一些资料中会看到有论点
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值