DOM 小总结
DOM 是什么
文档对象模型,是针对 HTML 和 XML 文档的一个 API (应用程序编程接口), 描绘了一个层次化的节点树。
D: document
当 web 浏览器浏览一个页面的时候,DOM 就在幕后把你编辑的网页文档转换成一个文档对象。(这也是为什么浏览器打开一个 html 文档显示的是丰富的内容,而在文本编辑器打开显示的是 html 源码的原因)
O: object
JavaScript 中宿主对象 window 中的一个属性:document。 document 对象主要处理网页内容。
M: model
DOM 把一份文档表示为一棵树。如文档:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>
<a href="#">标题</a>
</h3>
<p>内容</p>
</body>
</html>
文档模型用下图表示:
节点
上面介绍到 DOM 可以将任何的 html 与 xml 描绘成一个由多层节点构成的树。
而DOM 的每个节点都有 nodeType
, nodeName
和 nodeValue
属性,可以通过这些属性了解节点的具体信息。
接下来介绍其中 5 种节点:
Document - 文档节点
nodeType: 9
nodeName: #document
nodeValue: null
JavaScript 通过 Document 类型表示文档。
在浏览器中,document
对象是 HTMLDocument(继承自 Document 类型)的一个实例,表示整个 HTML 页面。而且 document
对象是 window
对象的一个属性。
可尝试在 chrome 浏览器控制台中打出:
console.log(document.nodeType);
< 9
console.log(document.nodeName);
< #document
console.log(document.nodeValue);
< null
Element - 元素节点
nodeType: 1
nodeName: 元素的标签名
nodeValue: null
文本段落的 nodeName:p
链接的 nodeName:a
元素可以包含其他元素,如标题包含链接等。
html
是根元素,唯一一个不能被包含在其他元素里面的元素。
Text - 文本节点
nodeType: 3
nodeName: #text
nodeValue: 节点所包含文本
页面中,我们看到的文字都是一个个文本节点。
如:
<p>文本</p>
<!-- 这里的"文本"就是一个文本节点。-->
<p> </p>
<!-- 这里 p 标签包含一个空格,也是一个文本节点。 -->
文本节点总是被包含在元素节点的内部。但并非所有的元素节点都包含文本节点。如:ul
、 img
Attr - 属性节点
属性就是存在于元素的 attributes 属性中的节点。通俗的讲,属性节点用来对元素做出更具体的描述。
nodeType: 2
nodeName: 属性的名称
nodeValue: 属性的值
例如:title, align, alt ...
Comment - 注释节点
nodeType: 8
nodeName: #comment
nodeValue: 注释的内容
如:<!-- 注释注释 -->
就是一个注释节点
DOM 常用属性
childNodes
: 获取任何一个元素的所有类型的节点,不仅仅是元素节点,还有文本节点、注释节点等。nodeType
: 节点类型值,总共有 12 中可取值nodeName
: 节点名称nodeValue
: 一个节点的值firstChild
: 元素的第一个元素lastChild
: 元素的最后一个元素innerHTML
: 读、写某给定元素里的 HTML 内容
DOM 常用方法
查找元素
getElementById
通过 ID 查找元素。
函数参数为 ID 的值,如果元素存在,返回 document 对象,不存在返回 null
。
<div id="ts" ></div>
var ele = document.getElementById('ts');
getElementsByClassName
通过 class 名称查找元素
函数参数为 class 的值,如果元素匹配到,返回的是 document 对象集合,不匹配则返回空数组。
创建元素
createElement
作用: 创建新元素
函数只接受一个参数,即要创建函数的标签名。
创建一个 <div>
元素代码如下:
var $div = document.createElement('div');
元素被创建后,可以为其添加更多的子节点,或者操作元素特性等。
虽然这个元素已经存在并且已经拥有了自己的 DOM 属性,但它还不是任何一颗 DOM 树的组成部分,它只是游荡在 JavaScript 世界里的一个孤儿。它这种情况称为文档碎片,还无法显示在浏览器的画面中。
可以使用 appendChild
添加到 DOM 树中 。
appendChild
作用:将节点添加到另一个节点的末端
函数参数只有一个,为即将被添加的节点。
如:
<div id="test"></div>
var div = document.createElement('div');
var ele = document.getElementById('test');
ele.appendChild(node);
createTextNode
作用:创建新文本节点
函数只接受一个函数,即要插入节点中的文本。
创建一个文本节点并添加到新元素中的代码如下:
var textNode = document.createTextNode('hello node!');
var div = document.createElement('div');
div.appendChild(textNode);
总结
DOM(文档对象模型),是针对 HTML 和 XML 文档的一个 API (应用程序编程接口), 描绘了一个层次化的节点树。
DOM 的 5 种节点类型:文档、元素、文本、属性、注释。
DOM 常用属性介绍。
DOM 常用方法介绍,分为两类:操作元素、查找元素。
DOM 小总结的更多相关文章
- dom小练习
dom小练习 学习要点 综合运用学过的知识完成几个综合小练习,巩固学过的知识. 阶段小练习8-1:改变网页字体的大小 要求和提示: 要求:当用户选择‘大/中/小’的选项时,页面字体发生相应的变化 阶段 ...
- python: DOM 小实例
一.全选 全部取消 反选 全选:选择指定的所有项目. 全部取消: 取消所有选定的项目. 反选: 选择未选定的,之前已选定的则取消. <!DOCTYPE html> <html la ...
- dom小总结
DOM是W3C的标准,分为3个不同的部分: 核心DOM:针对任何结构化文档的标准模型,XML DOM:针对XML文档的标准模型,HTML DOM:针对HTML文档的标准模型. HTML DOM中所有事 ...
- JS基础(一)dom小实例
DOM的新增示例 <script language="JavaScript"> window.onload = function(){ //createDocument ...
- jquery VS Dom(小实例单选-多选-反选)
一直以来大家对jquery评价莫过于六个字 “吃得少,干的多” ,应用实例让大家看看这款牛到爆的插件能帮我们做什么,话不多说,直接加码 <!DOCTYPE html> <html l ...
- Js操作DOM小练习_01
1.页面引入jQuery文件和bootstrap文件: 2.贴上代码 <!DOCTYPE html> <html lang="en"> <head&g ...
- 《微信小程序七日谈》- 第一天:人生若只如初见
<微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 微信小 ...
- JavaScript Dom入门
好像代码太杂了,博客园里跑不起来,单独复制到html中本地测试都是没有问题的. JavaScript JavaScript 是属于 web 的语言,它适用于 PC.笔记本电脑.平板电脑和移动电话. J ...
- DOM节点详解
@ 目录 学习总结 1. 什么是 DOM 2. HTMLDOM 3. 元素获取 元素获取方式: 元素节点的属性操作 4. Node 对象的属性和方法 常用属性 常用方法 5. 事件处理 事件驱动编程 ...
随机推荐
- 哈工大 信息安全 实验 Snort与单台防火墙联动实验
XX大学XX学院 <网络攻击与防御> 实验报告 实验报告撰写要求 实验操作是教学过程中理论联系实际的重要环节,而实验报告的撰写又是知识系统化的吸收和升华过程,因此,实验报告应该体现完整性. ...
- c# winform中TabControl中给每个选项卡添加不同的图标(图片)
在一个TabControl控件中,有几个选项卡,现在在每个选项卡上显示不同的图标. 1:你要现在form窗体中通过工具箱加入一个imagelist,名字为imagelist1,如下图: 2:然后在里面 ...
- 计算机网络实验 Labexercise1-1 Protocol Layers(Wireshark抓包与协议分析实验)
计算机网络实验 Labexercise1-1 Protocol Layers(Wireshark抓包与协议分析实验) 前言:本博客包含Windows10下安装wget.Wireshark. 一些有用的 ...
- JZ-021-栈的压入、弹出序列
栈的压入.弹出序列 题目描述 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序.假设压入栈的所有数字均不相等. 例如序列1,2,3,4,5是某栈的压入顺序,序列4 ...
- fibnacci数列的python实现
费波那契数列(Successione di Fibonacci) 又译为费波拿契数.斐波那契数列.费氏数列.黄金分割数列 在数学上,费波那契数列是以递归的方法来定义: 用文字来说,就是费波那契数列由0 ...
- Azure DevOps (三) 实现和Jenkins的联动
上一篇文章中,我们通过azure 的webhook实现了和钉钉机器人的联动,实现了通过钉钉机器人告知大家刚才谁动了仓库. 在文章开篇的时候我们举例说了jenkins也可以实现和azure联动,今天我们 ...
- Kendo UI Grid 使用总结
Kendo UI Grid控件的功能强大,这里将常用的一些功能总结一下. Kendo UI Grid 固定列 在使用Gird控件显示数据时,如果数据列过多,会出现横向滚动条,很多情况下,我们希望某些列 ...
- 提升Spring Boot项目中API接口并发能力的一个注解,效果明显
异步调用几乎是处理高并发Web应用性能问题的万金油,那么什么是"异步调用"?"异步调用"对应的是"同步调用",同步调用指程序按照定义顺序依次 ...
- Mybatis中的基本对象的生命周期和作用域
不同作用域和生命周期类别是至关重要的,因为错误的使用会导致非常严重的并发问题 SqlSessionFactoryBuilder 这个类可以被实例化.使用和丢弃,一旦创建了 SqlSessionFact ...
- 4月2日 python学习总结
昨天内容回顾: 1.迭代器 可迭代对象: 只要内置有__iter__方法的都是可迭代的对象 既有__iter__,又有__next__方法 调用__iter__方法==>得到内置的迭代器对象 调 ...