什么是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的更多相关文章

  1. 文本对象模型（Document Object Model）

    本文内容: 1. 概述 2. DOM中的节点类型 3. DOM节点的选取 4. 存取元素属性 5.DOM元素的增删 6.小结 ★ 概述 文本对象模型(DOM)是一个能够让程序和脚本动态访问和更新文档内 ...

  2. （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 ...

  3. JS--dom对象：document object model文档对象模型

    dom对象:document object model文档对象模型 文档:超文本标记文档 html xml 对象:提供了属性和方法 模型:使用属性和方法操作超文本标记性文档 可以使用js里面的DOM提 ...

  4. Eloquent JavaScript #11# The Document Object Model

    索引 Notes js与html DOM 在DOM树中移动 在DOM中寻找元素 改变Document 创建节点 html元素属性 布局 style CSS选择器 动画 Exercises Build ...

  5. DOM （文档对象模型(Document Object Model)）

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象 ...

  6. 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 ...

  7. DOM---文档对象模型(Document Object Model)的基本使用

    一.DOM简介 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口.它是一种与平台和语言无关的应用程序接口(API),它可以动态 ...

  8. DOM （文档对象模型(Document Object Model)

    DOM(文档对象模型(Document Object Model) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上 ...

  9. DOM 是什么，Document Object Model，文档对像模型

    #为什么会想起来写这个 在写dynaTrace Ajax的时候,写到这个是个前端性能测试工具,这个工具能记录请求时间,前端页面渲染时间,DOM方法执行时间,以及JavaScript代码解析和执行时间. ...

随机推荐

  1. Myeclipse插件快速生成ssh项目并配置注解 在action层注入service的超详细过程

    最近发现,我对于ssh的 自动注入配置 还是不熟悉,于是整理了一下 终于做了一个 简单的 注入配置出来. 以前都是在applicationContext.xml 里面这样配 <bean id=& ...

  2. mysql整理

    一.建表(创建一个简单的用户权限关系表) 1.user(用户表) CREATE TABLE `user` ( `username` ) NOT NULL, `password` ) DEFAULT N ...

  3. WPF自学入门（八）WPF窗体之间的交互

    今天我们一起来看一下WPF窗体之间的交互-窗体之间的传值.有两个窗体,一个是父窗体,一个是子窗体.要将父窗体的文本框中的值传递给子窗体中的控件.我们该怎么实现? 接下来我们一起来实现窗体之间的传值,在 ...

  4. 【python学习笔记】9.魔法方法、属性和迭代器

    [python学习笔记]9.魔法方法.属性和迭代器 魔法方法:xx, 收尾各有两个下划线的方法 __init__(self): 构造方法,创建对象时候自动执行,可以为其增加参数, 父类构造方法不会被自 ...

  5. redis基本类型和使用

    redis存储数据的基本类型有:string(字符串类型).hash(散列类型).list(列表类型).set(集合类型).zset(有序集合类型). 依次做一些练习.redis命令不区分大小写. k ...

  6. passwd命令使用

    2018-03-01  10:01:06 例1:passwd username 直接修改用户的密码普通用户可以且只能修改自己的密码,root用户可以修改任何人的密码[root@localhost ~] ...

  7. go语言的数组和切片区别

    这里不介绍数组和切片的使用技巧,主要看下2者的区别. 首先看下它们的定义: 数组:类型 [n]T 表示拥有 n 个 T 类型的值的数组. 切片:类型 []T 表示一个元素类型为 T 的切片. 看一个数 ...

  8. [模拟赛] T1 无线通讯网

    Description 国防部计划用无线网络连接若干个边防哨所.2种不同的通讯技术用来搭建无线网络: 每个边防哨所都要配备无线电收发器:有一些哨所还可以增配卫星电话. 任意两个配备了一条卫星电话线路的 ...

  9. 动画:UIViewAnimationOptions类型

    动画 1.常规动画属性设置(可以同时选择多个进行设置) UIViewAnimationOptionLayoutSubviews:动画过程中保证子视图跟随运动.**提交动画的时候布局子控件,表示子控件将 ...

  10. 【Ansible】 基于SSH的远程管理工具

    [Ansible] 参考文档:[http://www.ansible.com.cn/docs/intro.html] 和ansible类似的工具还有saltstack,puppet,sshpass等, ...