DOM 全称是 Document Object Model 文档对象模型
大白话,就是把文档中的标签,属性,文本,转换成为对象来管理

                                                                                                                                                                                                                                  Document 对象的理解:
               第一点:Document 它管理了所有的 HTML 文档内容。
               第二点:document 它是一种树结构的文档。有层级关系。
               第三点:它让我们把所有的标签 都 对象化
               第四点:我们可以通过 document 访问所有的标签对

模拟对象化,相当于:

class Dom{

private String id; // id 属性

private String tagName; //表示标签名

private Dom parentNode; //父亲

private List children; // 孩子结点

private String innerHTML; // 起始标签和结束标签中间的内容

}

这只是模拟java中的类

Document 对象中的方法介绍(*****重点)

通过标签的 id 属性查找标签 dom 对象,elementId 是标签的 id 属性值
            document.getElementById(elementId)

通过标签的 name 属性查找标签 dom 对象,elementName 标签的 name 属性值
            document.getElementsByName(elementName)

通过标签名查找标签 dom 对象。tagname 是标签名
            document.getElementsByTagName(tagname)

通过给定的标签名,创建一个标签对象。tagName 是要创建的标签名  
           document.createElement( tagName)

document 对象的三个查询方法,如果有 id 属性,优先使用 getElementById 方法来进行查询
如果没有 id 属性,则优先使用 getElementsByName 方法来进行查询
如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName
以上三个方法,一定要在页面加载完成之后执行,才能查询到标签对象。

getElementById():

getElementsByName 方法示例代码:

getElementsByTagName 方法示例代码:

createElement 方法示例代码:

javaScript学习DOM模型的更多相关文章

  1. 小白科普之JavaScript的DOM模型

    微信公众号“前端大全”推送了一篇名为“通俗易懂的来讲讲DOM”的文章,把javascript原生DOM相关内容讲解的很详细.仔细读了一遍,觉得整理总结的不错,对自己也很使用,所以把内容整理过来,并根据 ...

  2. JavaScript学习——DOM对象

    1.DOM操作 Document:整个html文件都称之为一个document文档 Element:所有的标签都是Element元素 Attribute:标签里面的属性 Text:标签中间夹着的内容为 ...

  3. Javascript中DOM技术的的简单学习

    第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...

  4. JavaScript学习总结(一)——ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)

    一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...

  5. JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)

    DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...

  6. JavaScript学习笔记(2)——JavaScript和DOM的关系

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的 ...

  7. JavaScript 学习笔记之线程异步模型

    核心的javascript程序语言并没有包含任何的线程机制,客户端javascript程序也没有任何关于线程的定义,事件驱动模式下的javascript语言并不能实现同时执行,即不能同时执行两个及以上 ...

  8. JavaScript学习总结(一)DOM文档对象模型

    一.文档(D) 一个网页运行在浏览器中,他就是一个文档对象. 二.对象(O) "对象"是一种自足的数据集合.与某个特定对象相关联的变量被称为这个对象的属性,只能通过某个对象调用的函 ...

  9. Javaweb学习笔记——(三)——————JavaScript基础&DOM基础

    day031.js的String对象 **创建String对象 ***var str = "abc"; **方法和属性(文档) ***属性 lenth:字符串的长度 ***方法 ( ...

随机推荐

  1. 精尽Spring Boot源码分析 - Condition 接口的扩展

    该系列文章是笔者在学习 Spring Boot 过程中总结下来的,里面涉及到相关源码,可能对读者不太友好,请结合我的源码注释 Spring Boot 源码分析 GitHub 地址 进行阅读 Sprin ...

  2. 明明是企业管理软件,CRM系统为何被抵触?

    小编在昨天的文章<CRM系统为什么没有达到预期效果?>中曾说过,CRM客户管理系统没有达到预期效果的其中一个原因是CRM系统的使用率太低,而根本的原因是员工的抵触.明明是企业管理大师,CR ...

  3. AcWing 1141. 局域网

    某个局域网内有n台计算机和m条 双向 网线,计算机的编号是1~n由于搭建局域网时工作人员的疏忽, 现在局域网内的连接形成了回路,我们知道如果局域网形成回路那么数据将不停的在回路内传输,造成网络卡的现象 ...

  4. margin属性总结,你想知道的这里都有

    一.前言 在学习CSS时,遇到的很多问题都是和margin有关,这个小怪兽总是出其不意的让我的界面排版变的混乱,还让人摸不着头脑,原因还是在于我对他的一些属性没有进行一个深入的了解,导致我在设计之初就 ...

  5. Docker部署Mysq集群

    1.PXC(Percona XtraDB Cluster) 速度慢 但能保证强一致性 适用于保存价值较高的数据 数据同步是双向的 在任一节点写入数据 都会同步到其他所有节点 在任何节点上都能同时读写 ...

  6. ESP32-FAT文件系统使用磨损均衡存储文件笔记

    基于ESP-IDF4.1 1 /* 2 FAT文件系统存储文件,使用磨损均衡库wear-leveling 3 */ 4 5 #include <stdlib.h> 6 #include & ...

  7. PID算法控制直流电机笔记

    1.将偏差的比例.积分和微分通过线性组合构成控制量,用这一控制量对被控对象进行控制,这样的控制器称为PID控制器.简单说就是根据系统的误差,利用比例.积分.微分计算出控制量进行控制. 2.为什么需要P ...

  8. kong配置upstream实现简单的负载均衡

    目录 通过konga实现 1. 配置upstream 2. 配置Service发布 3. 配置Route,匹配规则 4. 验证结果 通过 Kong Admin API实现 1. 配置upstream ...

  9. subList方法拆分集合问题

    subList方法拆分集合问题 分享一个有意思的错误,先看代码 public static void main(String[] args) throws IllegalAccessException ...

  10. C语言:编程求任意月份的天数

    闰年问题,因为二月份的天数与闰年有关.闰年的判断依据是:若某年能被4整除,但不能被100整除,则这一年是闰年:若某年能被400整除,则这一年也是闰年 #include <stdio.h> ...