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代码解析和执行时间. ...
随机推荐
- LightOJ1336 Sigma Function
题意 求和运算是一种有趣的操作,它来源于古希腊字母σ,现在我们来求一个数字的所有因子之和.例如σ(24)=1+2+3+4+6+8+12+24=60.对于小的数字求和是非常的简单,但是对于大数字求和就比 ...
- c#开发wps插件（3）部署
上一篇,我们完成了具体的开发工作,但是最终必须得部署到客户机器上.所以,部署方面,我花费了一些时间去研究,现在总结下.上一篇中,我为什么建议开发人员安装wps专业版呢?因为装了专业版,方便我们开发,安 ...
- EasyNetQ WithTopic过滤失效的解决方案
RabbitMQ原理及教程:http://www.cnblogs.com/AlvinLee/p/6141834.html EasyNetQ是什么以及常见用法这里都不做讲解.可以参考这篇博文:http: ...
- 特定场景下Ajax技术的使用
ajax介绍 jax技术包含了几种技术:javascript.xml.css.xstl.dom.xhtml和XMLHttpRequest七种技术,所以ajax就像是粘合剂把七种技术整合到一起,从而发挥 ...
- eclipse的常用快捷键和一些基本设置！！！
对于一些比较繁琐简单的代码没必要天天敲,为了提高效率,还是需要使用一些快捷键的:下面就说了一些比较基本的. alt+shift+s+c 无参构造器 alt+shift+s+O 有参构造器 ...
- 使用MBROSTool 工具制作本地硬盘F3救急模式的方法总结
前面写了一篇使用MBROSTool 工具制作本地硬盘多启动盘的方法总结.里面就是可以把一些系统安装到硬盘上面方便使用,比如安装PE到硬盘,不过启动的时候会先进入多UDm菜单,然后选择[启动本地系统]后 ...
- 软件测试第二周作业 WordCount
本人github地址: https://github.com/wenthehandsome23 psp阶段 预估耗时 (分钟) 实际耗时 (分钟) 计划 30 10 估计这个任务需要多少时间 20 ...
- Batch update returned unexpected row count from update [0] 异常处理
在one-to-many时遇到此异常,本以为是配置出错.在使用s标签开启debug模式,并在struts2主配置文件中添加异常映射,再次提交表单后得到以下异常详情. org.springframewo ...
- 《Linux命令行与shell脚本编程大全》- 读书笔记2 - 更多的bash shell命令
更多的bash shell命令 想检测进程,需要熟悉ps命令的用法.ps命令好比工具中的瑞士军刀,它能输出运行在系统上的所有程序的许多信息.默认情况下,ps命令只会显示运行在当前控制台下的属于当前用户 ...
- 原生js+canvas实现滑动拼图验证码
上图为网易云盾的滑动拼图验证码,其应该有一个专门的图片库,裁剪的位置是固定的.我的想法是,随机生成图片,随机生成位置,再用canvas裁剪出滑块和背景图.下面介绍具体步骤. 首先随便找一张图片渲染到c ...