JavaScript-DOM-节点简介与分类
简介
- 节点(node)是一个网络术语,它表示网络中的一个连接点。一个网络就是由一些节点构成的集合。
- 在DOM里,文档是由节点构成的集合,此时的节点是文档树上的树枝和树叶。
分类
DOM中包含许多不同类型的节点,下面先介绍其中三种:元素节点、文本节点和属性节点。
1. 元素节点
解释:DOM的原子是元素节点。
特征:
- 元素的名字就是标签的名字。example:文本段落元素的名字是“p”。
- 元素可以包含其他的元素。example:在html文件中,\元素是节点树的根元素,其他元素,例如head、body等,都包含在根元素中。
2.文本节点
解释:文本节点总是包含在元素节点内部,其内容就是文本。但不能说所有的元素节点都包含有文本节点。
例子:
<p>This is an example.</p>
在上面的<p>元素中,“This is an example.”就是一个文本节点。
3.属性节点
解释:属性节点用来对元素做出更具体的描述。
例子:
</p><p title="an example title">This is an example.</p>
在上面的<p>元素中,我们可以利用title属性来描述这个</p>
元素。
在DOM中,title="an example title"就是一个属性节点。
注意:
属性节点总是被放在起始标签里,即属性节点总是被包含在元素节点中。
但并非所有的元素都包含着属性,但所有的属性都被元素包含。
参考书籍:《JavaScript DOM编程艺术》
JavaScript-DOM-节点简介与分类的更多相关文章
- javascript DOM 节点 第18节
<html> <head> <title>DOM对象</title> </head><body><div >DOM对 ...
- JavaScript DOM–节点操作
节点 节点至少拥有nodeType(节点类型).nodeName(节点名称)和nodeValue(节点值)这三个基本属性. 元素节点 nodeType 为1 属性节点 nodeType 为2 文本 ...
- JavaScript DOM节点和文档类型
以下的例子以此HTML文档结构为例: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- JavaScript DOM节点操作总结
节点类型 节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进 ...
- javascript DOM节点
获得子节点方式: 1.将文本内容也当成节点 childNodes firstChild lastChild 2.获得标签为内容的节点 children firstElementChild lastEl ...
- console.time 简单分析javascript动态加入Dom节点的性能
Bullshit 本来想每天都更新下博客的,可是近期要考试,还有就是自己还是停留在暗自窃喜中吧(这样的想法要改变). 事实上近期总在想.自己要怎么去管理自己的数据,每天的生活都是对自己的数据的增删查改 ...
- JavaScript获取HTML DOM节点元素详解(转)
在Web运用程序特别是Web 2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要处理的疑问. 51CTO推荐阅读:JavaScript DOM文档 ...
- Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理
节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType : ...
- JavaScript学习笔记(三)——留言板知操纵DOM节点
用JavaScript写了一个简易的留言板,暂不涉及数据库接入等. 1.功能以及流程 主要功能即为留言,用两个文本框接受用户输入的用户名以及留言内容,然后通过"提交留言"按钮将用户 ...
- JavaScript操作DOM节点
DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网 ...
随机推荐
- Cent OS下安装JDK11
自己云服务器以前装了个JDK1.7,最近发现出了jdk11,所以修改一下JDK版本: 我这里用的是Xshell和XFtp工具,下载地址:https://www.netsarang.com/downlo ...
- 为什么0x100是256个字节、0x400是1KB、0x800是2KB、0x1000是4KB?
[TOC] # 前言在刚开始学习嵌入式时我们就遇到各种进制之间的换算,十六进制.十进制.八进制.二进制等等,一开始会经常在各种进制之间迷失自我:在深入学习或者做项目或者工作时我们也经常要查看各种芯片的 ...
- create-react-app 入门学习
全局安装 create-react-app npm install create-react-app -g 创建项目 在全局安装了create-react-app 后 创建项目,如果按照下面的第一种办 ...
- Java+Selenium3.3.1环境搭建
一.背景和目的 selenium从2.0开始,加入了webdriver,实际上,我们说的selenium自动化测试,大部分情况都是在使用webdriver的API.现在去Selenium官网,发现最新 ...
- 「BZOJ3545」「ONTAK2010」Peaks
「BZOJ3545」「ONTAK2010」Peaks 题目传送门 题目大意: 给定一个 \(n\) 个点,\(m\) 条边的带点权边权无向图,有 \(q\) 次询问,每次询问从 \(v\) 点出发,经 ...
- Kubernetes 1.13.3 部署 Prometheus+Grafana-7.5.2(最新版本踩坑)
本教程直接在 Kubernetes 1.13.3 版本上安装 Prometheus 和 Grafana-7.5.2,至于它们的原理和概念就不再赘述,这里就直接开始操作. Git 下载相关 YAML 文 ...
- Django基础-01篇
一.Django介绍 flask,FastApi是轻量级服务端开发框架 Django是重量级服务端开发框架 ORM:封装了数据库操作 form:校验请求数据 安装Django: pip install ...
- python使用笔记16--操作redis
操作redis应先引入第三方模块 执行以下命令 pip install redis 1.redis常用方法 1 import redis 2 #decode_responses=True将bytes转 ...
- CTF-safer-than-rot13-writeup
safer-than-rot13 题目信息 附件: cry100 XMVZGC RGC AMG RVMG HGFGMQYCD VT VWM BYNO, NSVWDS NSGO RAO XG UWFN ...
- C语言的编译与链接
C语言源文件要经过编译.链接才能生成可执行程序:编译(Compile)会将源文件(.c文件)转换为目标文件.对于 VC/VS,目标文件后缀为.obj:对于GCC,目标文件后缀为.o.编译是针对单个源文 ...