[DOM]初识DOM
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。
DOM的出现统一了浏览器残次不齐的问题,大大地扩展了Javascript的工作内容。使得页面内容更加丰富。

这张图片展示的就是DOM树的结构。
node:节点。类似树的结构,DOM由结点构成。结点又分为元素结点,文本结点和属性结点。元素结点很容易理解,想<a titile="begin">text</a>这样的一个整体就是元素结点,文本结点是里面的内容即text,属性结点就是指类似title这样的东西。
DOM获取元素有几种方式:
getElementById
getElementsByTagName
getElementsByClassName
getElementsByName
仔细看的话只有getElementById是Element,其他三种都是Elements
因此getElementById得到的是一个对象,其他三种都是对象数组,只能通过取下标获得。
getAttribute
setAttribute
设置属性值跟取得属性值,也可以直接靠 .attribute 取得,但兼容性不太强。
childNodes
firstChild
lastChild
nodeType
nodeValue
nodeName
childNodes是某个node的子节点,包括元素节点、文本节点等
firstChild 是取第一个节点,lastChild是取最后一个节点
nodeType是显示节点类型值,对于一个节点有唯一值匹配
元素:1
属性:2
文本:3
注释:8
文档:9
nodeValue是节点值
nodeName是节点标签名
例如:
对于<p id="demo" title="p1"><a>text</a>p_text</p>
c=document.getElementById("demo") //c为p节点
c.childNodes[0] --> <a>text</a>
c.childNodes[1] --> "p_text"
c.childNodes[0].nodeType -->1
c.childNodes[1].nodeType -->3
c.childNodes[0].nodeValue --> null
c.childNodes[1].nodeValue-->"p_text"
c.childNodes[0].nodeName --> "a"
c.childNodes[1].nodeName --> "#text"
[DOM]初识DOM的更多相关文章
- 初识DOM
初识DOM 一. 节点的获取.插入.创建.删除.替换.修改文本节点 获取 1.document.getElementById 2.(element)document.getElementsByTagN ...
- React v16-alpha 从virtual dom 到 dom 源码简读
一.物料准备 1.克隆react源码, github 地址:https://github.com/facebook/react.git 2.安装gulp 3.在react源码根目录下: $npm in ...
- -_-#【Dom Ready / Dom Load】
Dom Ready和Dom Load DOM Ready 详解 javascript的domReady 域名解析 - 加载html - 加载js和css - Dom Ready - 加载图片等其他信息 ...
- Virtual DOM 虚拟DOM的理解(转)
作者:戴嘉华 转载请注明出处并保留原文链接( #13 )和作者信息. 目录: 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一:用JS对象模拟DOM ...
- js 字符串转dom 和dom 转字符串
js 字符串转dom 和dom 转字符串 博客分类: JavaScript 前言: 在javascript里面动态创建标准dom对象一般使用: var obj = document.createE ...
- javascript DOM和DOM操作的四种基本方法
在了解了javascript的语言特性后,javascript真正大放光彩的地方来了——这就是javascript DOM Javascript DOM DOM(Document Object Mod ...
- 精讲 org.w3c.dom(java dom)解析XML文档
org.w3c.dom(java dom)解析XML文档 位于org.w3c.dom操作XML会比较简单,就是将XML看做是一颗树,DOM就是对这颗树的一个数据结构的描述,但对大型XML文件效果可能会 ...
- 虚拟DOM Vitural DOM Tree
提起Virtual DOM,总是给人一种高深莫测的感觉,大家都知道它比DOM快.那么Virtual DOM到底是何方神圣呢?在深入理解Virtual DOM之前,先让我们回顾一下DOM. 一.什么 ...
- DOM & Shadow DOM & Virtual DOM
DOM & Shadow DOM & Virtual DOM What is the difference between Shadow DOM and Virtual DOM? ht ...
随机推荐
- 20164318 毛瀚逸 Exp4 恶意代码分析
---恢复内容开始--- 1 关键内容 系统运行监控 (1)使用计划任务,每隔一分钟记录自己的电脑有哪些程序在联网,连接的外部IP是哪里.运行一段时间并分析该文件,综述分析结果. (2)安装配置sys ...
- Python基础:二、python介绍
Python崇尚优美.清晰.简单,是一个优秀并广泛使用的语言 python的创始人为GuidovanRossum.1989年圣诞节期间,Guido再阿姆斯特丹未来打发时间,决心开发一个新的脚本解释程序 ...
- Assembly Experiment5
Answer to the experiment(1),(2),(3),(4) Experiment(5): Screenshots&Results: from the command u w ...
- [IOS][已越狱]配合网易云音乐,使用Bridge快速免iTunes导入音乐到“音乐”
前置:已越狱IOS设备 工具表: Bridge{bigboss源,可以使用cydown以非官方服务器下载安装} 网易云音乐{Appstore} Filza{很多源都有} 网易云试听缓存路径 ...
- test png
$x^2 \int $ When $a \ne 0$, there are two solutions to (ax^2 + bx + c = 0) and they are $$x = {-b \p ...
- oracle 中update多个字段
update A set (A.a2,A.a3) =(select B.b2,b.b3 from B where B.b1= A.a1 and A.a3=100 )
- day02 进制之间的转换and计算机编码叙述
一. 进制的转好技巧 二进制:0 1 八进制:0 1 2 3 4 5 6 7 十进制:0 1 2 3 4 5 6 7 8 9 十六进制:0 1 2 3 4 5 6 7 8 9 A B C D E ...
- vue-cli 项目实现路由懒加载
在vue 单页应用中,如果路由不实现懒加载,那么打包出来的文件将会非常大,加载也会非常慢.vue-router 官网也有相应的介绍,但是具体怎么去实现还是讲的比较模糊的,下面将一步步讲解配置路由懒加载 ...
- intval — 获取变量的整数值
echo intval ( '-42' ); // -42
- Android环境下hanlp汉字转拼音功能的使用介绍
由于项目需要在Android手机设备上实现汉字转拼音功能(支持多音字),于是首先想到了Pinyin4j+多音字映射对照表的实现方案,并在项目中试用了一段时间,发现数据量大时,其耗时非常严重.后来寻找其 ...