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代码解析和执行时间. ...
随机推荐
- 【NOIP2013】华容道（最短路）
题目戳我 懒得粘贴题目了..就这要凑合一下吧... 题解 反正棋盘的状态不会变的... 所以,预处理一下??? 恩,如果一个棋子要移动到某个目标位置的话, 可以看成只有空格和这个子要动呀(其他的有区别 ...
- jsoup.parse 的一个坑
那天,写好一个爬虫 爬取某个网站的数据. 当时调用了公司不知道某个人写的 一个方法 logger.info(joururl); doc= util.getDocument(joururl.toStri ...
- java 压缩文件
package folder; import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundExcept ...
- Flex 关于 keyDown事件的添加和移除（另附添加事件的执行带参数的函数）
今天遇到一个棘手的问题,原本的textInput控件有一个keyDown事件,但是不是所有的用户都需要,麻烦了首先先删除控件里面的keyDown,这个事件放在这谁都得用,我就是不想用这就实现不了,怎么 ...
- 使用Dreamweaver正则表达式替换href中的内容
在Dreamweaver中使用正则表达式替换href中的内容,就像下面这些href中的内容复杂多样的情况下,href="/html/u.html",href="/tuho ...
- 腾讯企业邮箱又一次隐藏了qq邮件列表的入口
今天登陆腾讯企业邮箱,发现腾讯企业邮箱又一次隐藏了qq邮件列表的入口,很不方便操作, 我们切换到工具箱选项,然后随便点击里面的一个工具,比如:企业网盘,然后看浏览器地址栏的地址如下:http://ex ...
- 优化python程序的几点建议
1.在需要只读序列时,最好使用元组而非列表: 2.使用生成器yield,而不是创建大的元组和列表并在其上进行迭代处理: 3.尽量使用python内置的数据结构,而不实现自己的自定义结构: 4.从小字符 ...
- Eclipse CDT开发环境搭建及问题记录（Windows）
这两天在整Eclipse,在此记录过程中遇到的一些问题. 1.安装JDK,配置系统路径: 2.下载Eclipse 直接访问Eclipse官网(https://www.eclipse.org/downl ...
- django初探-创建简单的博客系统(二)
上篇django初探-创建简单的博客系统(一)已经记录了Django实现博客的发布的整个过程,接下来继续说明博客标题和内容的显示. 显示博客详细 将博客内容保存到数据库还不是发布博客的终极目的,博客一 ...
- NodeJS定时任务
在实际开发项目中,会遇到很多定时任务的工作.比如:定时导出某些数据.定时发送消息或邮件给用户.定时备份什么类型的文件等等 一般可以写个定时器,来完成相应的需求,在node.js中自已实现也非常容易,接 ...