HTML DOM 入门知识点总结

HTML DOM
- 节点概念
- 获取节点
- 节点的属性
- 样式
- 事件
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” 阻止事件的发生

练习：

下拉菜单
选中所有 checkbox
验证账号是否存在

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

parentNode 父节点
previousSibling、nextSibling 同胞节点
firstChild、lastChild、childNodes 子节点
childNodes 和 children 都可以获取一个元素节点的子节点
childNodes 会包含文本节点
children 会排除文本节点

创建节点

代码：html_dom - 节点关系 - 创建节点

createElement 创建元素节点
createTextNode 创建文本节点
createAttribute 创建属性节点

练习：动态创建一个表

删除节点

代码：html_dom - 节点关系 - 删除节点

removeChild 删除元素节点
removeAttribute 删除属性节点
removeChild、innerHTML 删除文本

替换节点

replaceChild 替换节点

插入节点

代码：html_dom - 节点关系 - 创建节点

appendChild 在最后追加节点
insertBefore 在前方插入节点

练习：动态加载js

使用场景

代码：html_dom - 节点关系 - 使用场景

删除行为前的提示
验证账号密码是否为空
提交数据验证长度
提交数据验证年龄是否数字
提交数据验证年龄是否为整数
验证e-mail格式是否正确
隐藏和显示
表格排序

HTML DOM 入门知识点总结相关推荐

Double计算精度丢失（金融入门知识点）
Double计算精度丢失(金融入门知识点) 一.double精度丢失二.为什么double会精度丢失三.BigDecimal错误的用法四.BigDecimal正确的用法 Double计算精度丢失 ...
（金融入门知识点）Double类型丢失精度
Double计算精度丢失原因:Double计算精度丢失(金融入门知识点)__yosemite的博客-CSDN博客_double精度丢失 Double计算精度丢失解决办法:Double类型丢失精度的两种 ...
C# 零基础入门知识点汇总
C# 零基础入门知识点汇总前言一,基础语法(1~10) 二,流程控制(11~20) 三,数组相关(21~30) 四,函数介绍(31~40) 五,类和对象(41~50) 六,面向对象(51~60) ...
redis原理快速入门知识点总结
redis原理快速入门知识点总结 1. 项目中缓存是如何使用的?为什么要用缓存?缓存使用不当会造成什么后果? 为什么用缓存? 1.高性能: 一些需要复杂操作耗时查出来的结果,且确定后面不怎么变化,但是 ...
python入门知识点-1
文章目录 python入门知识点-1 字符串的常见操作字符串的编码字符串的编码集格式化输出字符字符串format方法的使用列表的基本使用基操列表增加元素列表的修改查询和删除列表的遍历 ...
C++57个入门知识点_17 类的访问权限及C语言模拟类的封装（类的私有权限突破方法：编译期进行权限检查，运行期通过指针修改类的私有成员变量；利用函数指针对结构体中成员变量进行修改；CPU大小尾排列）
接上篇:C++57个入门知识点_16 类的标准写法(类名.成员变量.成员函数及对象命名规则:成员变量一般为私有,成员函数为公有并暴露给外部使用成员变量:防止类过大,声明写在.h,实现写在.cpp,调用 ...
Java小结|Java入门知识点
Java入门知识点 Java入门知识点 Java的起源与演变 Java的起源 Java的演变 Java 体系与特点 Java体系 Java能做什么 Java的特性 Java 跨平台原理 Java 技术 ...
C++57个入门知识点_50 菱形继承与虚继承（C++中语法允许多重继承造成菱形继承；会造成近亲结婚的问题；可以通过虚继承的方式解决；实际项目中不多用多重继承）
上篇C++57个入门知识点_49 多重继承与组合(一个类同时具有多个类的属性的方法:多重继承或者组合:多重继承:一个类同时继承多个类:多重继承构造和析构的顺序与普通继承类似:组合:类中包含多个成员对象 ...
JavaScript之BOM和DOM入门
JavaScript之BOM和DOM入门 JavaScript的组成包含三大部分,分别为ECMAScript.DOM和BOM.JavaScript组成,如下图所示: ECMAScript是JavaSc ...

HTML DOM 入门知识点总结

HTML DOM 入门知识点总结

HTML DOM

节点概念

获取节点

节点的属性

样式

事件

HTML DOM 节点关系

基本概念

创建节点

删除节点

替换节点

插入节点

使用场景

HTML DOM 入门知识点总结相关推荐

最新文章

热门文章