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代码解析和执行时间. ...
随机推荐
- haproxy的stick table复制
在上一篇文章中,分析了haproxy的stick table特性和用法,其中特性之一也是很实用的特性是stick table支持在haproxy多个节点之间进行复制(replication). 本文仅 ...
- Spring【DAO模块】就是这么简单
前言 上一篇Spring博文主要讲解了如何使用Spring来实现AOP编程,本博文主要讲解Spring的DAO模块对JDBC的支持,以及Spring对事务的控制... 对于JDBC而言,我们肯定不会陌 ...
- js文本框字符数输入限制
我们常常在前台页面做一些文本输入长度的验证,为什么呢?因为数据库字段设置了大小,如果不限制输入长度,那么写入库时就会引发字符串截断异常.今天就给大家分享一个jquery插件来解决这一问题. (func ...
- linux下关闭网络命令
CTRL+ALT+F1 进入命令行模式 CTRL+ALT+F7 退出命令行模式 sudo ifconfig ethX dwon 关闭网卡sudo /etc/init.d/networking stop ...
- tp框架的url模式
tp框架url地址可以由以下四种 http://网址/index.php?m=XX&c=XX&a=XX 基本get模式 http://网址/index.php/模块/控制器/操作方 ...
- zabbix添加自定义监控项
zabbix添加自定义监控项 author:headsen chen 2017-10-16 17:23:17 个人原创,转载请注明作者,出处,否则依法追究法律责任 主机端配置: 首先安装好za ...
- svn从Windows服务器上迁移到Linux上
svn从Windows服务器迁移到Linux服务器 author:headsen chen 2017-10-16 16:50:32 个人原创,转载请注明.否则依法追究法律责任 ...
- linux学习之路－－（六）用户及权限详解
计算机资源 用户 用户的容器,用户组 权限 进程时用户访问计算机的代理,操作文件的时候,文件本身有权限,进程本身也有权限 安全上下文(secure context) 权限: r, w, x 文件: r ...
- 关于Cesium中的常用坐标系及说明
Cesium是一个基于JavaScript的开源框架,可用于在浏览器中绘制3D的地球,并在其上绘制地图(支持多种格式的瓦片服务),该框架不需要任何插件支持,但是浏览器必须支持WebGL. Cesium ...
- python 装饰器 一篇就能讲清楚
装饰器一直是我们学习python难以理解并且纠结的问题,想要弄明白装饰器,必须理解一下函数式编程概念,并且对python中函数调用语法中的特性有所了解,使用装饰器非常简单,但是写装饰器却很复杂.为了讲 ...