HTML DOM 入门知识点总结，985研究生入职电网6个月-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_60607838/article/details/119966487




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

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



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



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

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

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

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

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

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



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

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



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



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

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

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

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

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



练习：



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

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

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



[](https://codechina.youkuaiyun.com/m0_60958482/java-p7)样式

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



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



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

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

    

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

    



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



[](https://codechina.youkuaiyun.com/m0_60958482/java-p7)事件

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



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



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

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

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

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

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

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

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

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

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



练习：



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

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

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



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

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



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

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



代码：[html\_dom - 节点关系 - 基本概念](https://codechina.youkuaiyun.com/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.youkuaiyun.com/m0_60958482/java-p7) 父节点

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

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

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

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

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



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

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



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



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

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

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



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



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

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



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



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

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

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



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

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



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



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



### 最后

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