Document Object Model
什么是DOM W3C制定的书写HTML分析器的标准接口规范
全称 Document Object Model 文档对象模型
DOM为HTML文档提供的一个API（接口） 可以操作HTML文档
<!DOCTYPE html> 不是标签
作用 声明 告诉浏览器采用哪个版本的html去解析代码
发展历程 包含0到3级 0，3级并不是W3C的标准
当浏览器加载HTML页面时，就会创建一个DOM树结构
四个节点
文档 元素 文本 属性
9 1 3 2
判断节点类型
https://runjaelyn.github.jo
DOM查询
document.getElementById( id属性值 )
document.getElementsByClassName( class属性值 )
document.getElementsByTagName( 标签名 )
document.getElementsByName( name属性值 )
let box = document.getElementsById("box");
console.log(box);
let wrap = document.getElenmentsByClassName("warp")[0];
console.log(wrap);
let divs = document.getElementsByTagName("div")[1];
console.log(divs);
let username = document.getElementsByClassName("username");
console.log(username);
querySelector()
返回第⼀个选择器匹配的 HTML 页面元素。
querySelectorAll()
返回全部选择器匹配的 HTML 页面元素。
Document 对象、Element 对象和 Node 对象这三个对象
（空格和换行都是文本节点）
Document 对象
创建文本节点
let divEle = document.createElement("div");
document.body.appendChild( divEle );
var text = document.createTextNode("hello world");
divEle.appendChild( text );
创建属性节点
let node = document.getElementById("div"); // 获取 <div> 标签
let attr = document.createAttribute("my_attr"); // 创建属性节点
attr.nodeValue = "属性值"; // 设置属性节点的 nodeValue
node.setAttributeNode( attr );
缓存 DOM 查询
当把 DOM 查询的结果保存在⼀个变量后，实际上是把获取的指定标签在 DOM 节点树中的位置保存在变量中。这个元素
节点（标签）的属性和方法可以通过这个变量来使用。
通过 getElementsByName() 、 getElementsByTagName() 和 getElementsByClassName() 方法获取的
NodeList 就是动态的 NodeList。
通过 querySelectorAll() 方法获取的 NodeList 就是动态的 NodeList。
parentNode是一种方法
Document Object Model的更多相关文章
- 文本对象模型（Document Object Model）
本文内容: 1. 概述 2. DOM中的节点类型 3. DOM节点的选取 4. 存取元素属性 5.DOM元素的增删 6.小结 ★ 概述 文本对象模型(DOM)是一个能够让程序和脚本动态访问和更新文档内 ...
- （3）选择元素——（2）文档对象模型（The Document Object Model）
One of the most powerful aspects of jQuery is its ability to make selecting elements in the DOM easy ...
- JS--dom对象：document object model文档对象模型
dom对象:document object model文档对象模型 文档:超文本标记文档 html xml 对象:提供了属性和方法 模型:使用属性和方法操作超文本标记性文档 可以使用js里面的DOM提 ...
- Eloquent JavaScript #11# The Document Object Model
索引 Notes js与html DOM 在DOM树中移动 在DOM中寻找元素 改变Document 创建节点 html元素属性 布局 style CSS选择器 动画 Exercises Build ...
- DOM （文档对象模型(Document Object Model)）
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象 ...
- JAVA读取XML，JAVA读取XML文档，JAVA解析XML文档，JAVA与XML，XML文档解析(Document Object Model, DOM)
使用Document Object Model, DOM解析XML文档 也可参考我的新浪博客:http://blog.sina.com.cn/s/blog_43ac5543010190w3.html ...
- DOM---文档对象模型(Document Object Model)的基本使用
一.DOM简介 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口.它是一种与平台和语言无关的应用程序接口(API),它可以动态 ...
- DOM （文档对象模型(Document Object Model)
DOM(文档对象模型(Document Object Model) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上 ...
- DOM 是什么，Document Object Model，文档对像模型
#为什么会想起来写这个 在写dynaTrace Ajax的时候,写到这个是个前端性能测试工具,这个工具能记录请求时间,前端页面渲染时间,DOM方法执行时间,以及JavaScript代码解析和执行时间. ...
随机推荐
- [UVAlive4297]First Knight
题面在这里 题意 给定一个\(n\times m\)的格网,从\((1,1)\)出发,每一格\((i,j)\)往上下左右移动的概率已经给出,询问到达\((n,m)\)的期望步数 数据范围 \[n,m\ ...
- 回滚 - 每天5分钟玩转 Docker 容器技术（141）
kubectl apply 每次更新应用时 Kubernetes 都会记录下当前的配置,保存为一个 revision(版次),这样就可以回滚到某个特定 revision. 默认配置下,Kubernet ...
- c++程序运行时的内存分配《转》
C++中,内存分为5个区:堆.栈.自由存储区.全局/静态存储区和常量存储区. 1.栈:是由编译器在需要时自动分配,不需要时自动清除的变量存储区.通常存放局部变量.函数参数等. 2.堆:是由new分配的 ...
- TP5 路由使用
这里可以直接从第四条开始看 原文http://www.upwqy.com/details/12.html 1 文档链接 tp5路由官方文档 https://www.kancloud.cn/manua ...
- 系统及DB参数引发的“灾难”
最近,处理了一个系统及db参数设置不合理引发"灾难"的案例.前几天,接到某用户的紧急求助电话,同时,也收到了邮件.大概内容是:该用户某系统接连出现挂死现象,问题直指后台数据库(ai ...
- which framework or library is best to use WebRTC
which framework or library is best to use WebRTC http://stackoverflow.com/questions/24857637/current ...
- QT 中setUserData和setProperty问题
在5.9的官方文档里是找不到QObject中的setUserData 的,相反他提供了setProperty(). void setUserData(uint id, QObjectUserData ...
- Hadoop的Archive归档命令使用指南
hadoop不适合小文件的存储,小文件本省就占用了很多的metadata,就会造成namenode越来越大.Hadoop Archives的出现视为了缓解大量小文件消耗namenode内存的问题. 采 ...
- 在VMWare上安装Arch Linux
1.为什么选择Arch Linux Arch Linux 是通用 x86-64 GNU/Linux 发行版.Arch采用滚动升级模式,尽全力提供最新的稳定版软件.初始安装的Arch只是一个基本系统,随 ...
- 线程池ThreadPoolExecutor源码解读研究（JDK1.8）
一.什么是线程池 为什么要使用线程池?在多线程并发开发中,线程的数量较多,且每个线程执行一定的时间后就结束了,下一个线程任务到来还需要重新创建线程,这样线程数量特别庞大的时候,频繁的创建线程和销毁线程 ...