HTML DOM 入门知识点总结，高级Java工程师面试问题

本文链接：https://blog.csdn.net/m0_60607783/article/details/119993012

本文详细介绍了HTML DOM的基础概念，包括节点获取、属性管理、样式应用和事件处理。通过实例演示了如何使用getElementById、getElementsByTagName等方法获取节点，并探讨了节点关系、焦点、鼠标和键盘事件的实战技巧。

摘要由CSDN通过智能技术生成

*   [样式](about:blank#_72)

*   [事件](about:blank#_80)

HTML DOM 节点关系
- 基本概念
- 创建节点
- 删除节点
- 替换节点
- 插入节点
- 使用场景

教程来源：how2j 的 html dom 教程

详细知识点目录：【重识 HTML + CSS】知识点目录

Gitee 代码：https://gitee.com/szluyu99/how2j_front_note/tree/master/html_dom

HTML DOM

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

节点概念

DOM 是 Document Object Model（文档对象模型）的缩写，它是以面向对象的角度来看待 HTML，比如一个超链接（a 标签），作为一个 DOM 对象，就可以使其隐藏，修改其 href 指向的地址。

DOM 把所有的 html 都转换为节点：

整个文档 是一个节点
元素是节点
元素属性 是节点
元素内容 是节点
注释也是节点

下例中：

通过 document.getElementById 获取了 id='d1' 的 div 标签对应的元素节点
然后通过attributes 获取了该节点对应的属性节点
接着通过 childNodes 获取了内容节点


<html>



<body>

    <div id="d1">hello HTML DOM</div>

</body>



<script> function p(s) {

        document.write(s);

        document.write("<br>");

    }

    var div1 = document.getElementById("d1");

    p("文档节点" + document);

    p("元素" + div1);

    p("属性节点" + div1.attributes[0]);

    p("内容节点" + div1.childNodes[0]); </script>



</html>

获取节点

代码：html_dom - 获取节点

getElementById 通过 id 获取元素节点
getElementsByTagName 通过标签名称获取元素节点
getElementsByClassName 通过类名获取元素节点
getElementsByName 通过表单元素的 name 获取元素节点
attributes 获取属性节点
childNodes 获取内容节点

节点的属性

代码：html_dom - 节点的属性

nodeName 节点名称
nodeValue 节点值
nodeType 节点类型
innerHTML 元素的文本内容
id value className 元素上的属性

练习：

样式

一个元素节点的 style 属性即对应的 css，代码：html_dom - 样式

d.style.display 隐藏和显示
d.style.backgroundColor 改变背景色

css 属性名是 “background-color”，这里是 “backgroundColor”。 jQuery 可以用 css 属性名操作样式

练习：表格斑马线

事件

代码：html_dom - 事件

onfocus、onblur 焦点事件
onmousedown、onmouseup、onmousemove、onmouseout 鼠标事件
onkeydown、onkeypress、onkeyup 键盘事件
onclick、ondblclick 点击事件
onchange 变化事件
onsubmit 提交事件
onload 加载事件
this 当前组件
οnsubmit=“return false” 阻止事件的发生

练习：

HTML DOM 节点关系

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

基本概念

代码：html_dom - 节点关系 - 基本概念


<div id="parentDiv">

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

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

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

</div>

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

parentDiv 的 children 是 d1 d2 d3

在这里插入图片描述

最后

小编利用空余时间整理了一份《MySQL性能调优手册》，初衷也很简单，就是希望能够帮助到大家，减轻大家的负担和节省时间。

关于这个，给大家看一份学习大纲（PDF）文件，每一个分支里面会有详细的介绍。

这里都是以图片形式展示介绍，如要下载原文件以及更多的性能调优笔记（MySQL+Tomcat+JVM）！

CodeChina开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频】

6,color_FFFFFF,t_70)

最后

小编利用空余时间整理了一份《MySQL性能调优手册》，初衷也很简单，就是希望能够帮助到大家，减轻大家的负担和节省时间。

关于这个，给大家看一份学习大纲（PDF）文件，每一个分支里面会有详细的介绍。

[外链图片转存中…(img-p6HQ3MSS-1630292881230)]

这里都是以图片形式展示介绍，如要下载原文件以及更多的性能调优笔记（MySQL+Tomcat+JVM）！

CodeChina开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频】