什么是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. [BZOJ1207] [HNOI2004] 打鼹鼠 (dp)

    Description 鼹鼠是一种很喜欢挖洞的动物,但每过一定的时间,它还是喜欢把头探出到地面上来透透气的.根据这个特点阿Q编写了一个打鼹鼠的游戏:在一个n*n的网格中,在某些时刻鼹鼠会在某一个网格探 ...

  2. Hive 自定义函数

    hive 支持自定义UDF,UDTF,UDAF函数 以自定义UDF为例: 使用一个名为evaluate的方法 package com.hive.custom; import org.apache.ha ...

  3. 详解MySQL数据类型

    原文地址http://www.cnblogs.com/xrq730/p/5260294.html,转载请注明出处,谢谢! 前言 很久没写文章,也有博友在我的有些文章中留言,希望我可以写一些文章,公司项 ...

  4. SEO优化策略

    原文:http://www.upwqy.com/details/186.html 1 首先了解seo是什么 SEO是英文Search Engine Optimization的缩写,中文译为" ...

  5. CSS中的各种FC

    什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用. BFC 什么是BFC Block ...

  6. python装饰器使用

    看了不少python关于装饰器文章,觉得还挺实用,发贴来mark一下(以前做笔记总会长时间不看就忘记,放这里应该不会忘了吧 - -) 先来看一个简单的知识点: def a(): print(" ...

  7. 【Python】 xml转json

    虽然python有解析xml的模块,也有生成json的模块,但是没有把这两者连接起来的模块. 下面是以来自MIT的大神Martin Blech写的一个方便的模块,供大家参考.也别忘了在用之前先拜谢作者 ...

  8. java.lnag.Throwable详细解读

    public  class Throwable  extends  Object  implemnts Serializable Throwable类是所有错误或异常的超类.只有当对象是此类(或其中之 ...

  9. Nginx阻止对不明确主机名的请求

    在用户请求头中,有可能会有Host行不明确的情况,如果不想处理这类用户请求,那么可以定义一个默认的server来丢弃这类请求.例如 server{ listen default_server; ser ...

  10. java设计模式-State（状态）模式

    state定义     不同的状态,不同的行为;或者说,每个状态有着相应的行为.         就像电风扇的开关,一档的上一个是关闭,关闭的上一个是五档,五档的上一个是四档,以此类推,而且五档的下一 ...