什么是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. php 目录处理函数

    之前我们处理的全都是文件,那目录和文件夹怎么处理呢? 我们就来学习目录或者称为文件夹的处理相关函数. 处理文件夹的基本思想如下: 1.读取某个路径的时候判断是否是文件夹 2.是文件夹的话,打开指定文件 ...

  2. c#开发wps插件（2）

    上一篇,我们谈了插件开发原理,现在该是应用原理的时候了.工欲善其事必先利其器,首先安装wps 2016专业版,然后再开发. 第一步:打开vs2010,新建一个类库项目,项目结构如下: 说明:其中Res ...

  3. JavaScript方面的书籍

    我要向大家推荐两本js方面的书: <JavaScript权威指南> <JavaScript高级程序设计>适合想在js方面有所提高的开发人员 我们读书是为了什么? 有的人可能是兴 ...

  4. 无后台应用 Stash Backend

    Stash Backend 是Github上的开源项目 https://github.com/gaboratorium/stash,目的在于提供一套方便使用.方便部署的后台应用.特别适合为Web前端和 ...

  5. Lintcode212 Space Replacement solution 题解

    [题目描述] Write a method to replace all spaces in a string with%20. The string is given in a characters ...

  6. Python快速入门之与C语言异同

    代码较长,建议使用电脑阅读本文. 10分钟入门Python 本文中使用的是Python3如果你曾经学过C语言,阅读此文,相信你能迅速发现这两种语言的异同,达到快速入门的目的.下面将开始介绍它们的异同. ...

  7. python爬微信公众号前10篇历史文章（3）-lxml&xpath初探

    理解lxml以及xpath 什么是lxml? python中用来处理XML和HTML的library.与其他相比,它能提供很好的性能, 并且它支持XPath. 具体可以查看官方文档->http: ...

  8. elasticsearch------java操作之QueryBuilders构建搜索Query

    版权声明:本文为非原创文章,出处:http://blog.csdn.net/xiaohulunb/article/details/37877435. elasticsearch 分布式搜索系列专栏:h ...

  9. ASP.NET Core Web 支付功能接入 微信-扫码支付篇

    这篇文章将介绍ASP.NET Core中使用 开源项目 Payment,实现接入微信-扫码支付及异步通知功能. 开发环境:Win 10 x64.VS2017 15.6.4..NET Core SDK ...

  10. 目标检测网络之 YOLOv2

    YOLOv1基本思想 YOLO将输入图像分成SxS个格子,若某个物体 Ground truth 的中心位置的坐标落入到某个格子,那么这个格子就负责检测出这个物体. 每个格子预测B个bounding b ...