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

最新推荐文章于 2024-05-31 10:46:10 发布

Java独家笑

最新推荐文章于 2024-05-31 10:46:10 发布

阅读量70

点赞数

分类专栏： Java 文章标签： java html html5 后端

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

版权

Java 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

*   [样式](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面试题解析+核心总结学习笔记+最新讲解视频】

Java独家笑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML DOM 入门知识点总结，高级Java工程师面试问题

* [样式](about:blank#_72)* [事件](about:blank#_80)HTML DOM 节点关系基本概念创建节点删除节点替换节点插入节点使用场景教程来源：how2j 的 html dom 教程详细知识点目录：【重识 HTML + CSS】知识点目录Gitee 代码：https://gitee.com/szluyu99/how2j_front_note/tree/master/html_domHTML
复制链接

扫一扫