DOM是什么?有什么用处?js与DOM啥关系?
大家都想知道dom是什么,翻了各种文档,找了各种资料,看完还是云里雾里的,想表达吧,又说不上来,如果,您是大神,请绕道,又或者看完我的文章,有不足之处,欢迎提出,本人会积极改正。本来就是互相学习的过程嘛…嘿嘿**
在各种网站上都能找到的信息,这里就不一一说了,直奔主题。
(基本信息:[dom介绍(http://www.w3school.com.cn/htmldom/dom_intro.asp))
1、DOM
DOM全称 Document Object Model,即文档对象模型,它允许脚本(js)控制Web页面、窗口和文档。对象你知道吧,一个人就是一个对象。那么动物呢,一条狗也是对象,作为高大尚的人怎么可以和动物扯在一块,这个时候,是不是就要分类啦比如人类呀,动物啦,植物啦,等等… 所以就有了w3c里面介绍的那样咯,DOM 标准被分为 3 个不同的部分:
核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
哎呀,说了那么久,还不是一大堆feihua吗
2、DOM的作用
做网页的都知道,想要做一个动态页面,需要交互之类的,那这个时候,静态页面是无法满足的,千万别跟我说,你可以提前把要查询的显示的内容写在代码里,那么多数据,你要写几年啊。。要实时变化嘛,当然得有后台支持。就比如你在博客里,修改个人信息,添加一个标签页,删除个性签名等等,都需要同步的额。
① 查询某个元素
② 查询某个元素的祖先、兄弟以及后代元素
③ 获取、修改元素的属性
④ 获取、修改元素的内容
⑤ 创建、插入和删除元素
按照不同的类型来分,dom有不同的节点:文档节点、元素节点、属性节点、文本节点、注释节点,别说话,看图:
HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法。
通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性。可以对其中的内容进行修改和删除,同时也可以创建新的元素。
HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。
3、JS 和DOM有什么联系吗? js是代码,html是标记语言哦
想要做成动态页面,肯定要用到js了,管你是vue还是ng还是什么的。
DOM的妙处在于:它能够在所有浏览器上提供一种一致的方式,通过代码访问HTML的结构和内容。
1、在浏览器加载一个页面时,浏览器会解析HTML,并创建文档的一个内部模型,其中包含HTML标记的所有元素,自上而下解析,遇到JavaScript浏览器会检查它的正确性,然后执行代码。
2、JavaScript继续执行,使用DOM检查页面、完成修改、从页面接受事件,或者要求浏览器从Web服务器获取其它数据
注:document是一个反映HTML的对象,通过调用document的方法改变DOM的状态,也就是改变HTML页面
3、JavaScript修改了DOM时,浏览器会随着动态更新页面。
DOM就是一张映射表啦,记录着一堆用代码操控document时的规章制度,直白点说,就是js操作html时的API
---------------------
作者:七色花的姐姐
来源:CSDN
原文:https://blog.csdn.net/u012155729/article/details/78135393
版权声明:本文为博主原创文章,转载请附上博文链接!
DOM是什么?有什么用处?js与DOM啥关系?的更多相关文章
- 框架操作DOM和原生js操作DOM比较
问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
- JS性能--DOM编程之重排与重绘
浏览器下载完页面中的所有组件----HTML标记,Js,CSS,图片等之后会解析并生成两个内部数据结构: DOM树 -------- 表示页面结构 渲染树 -------- 表示DOM节点如何显 ...
- js的DOM对象
1.js的Array对象 ** 创建数组(三种) - var arr1 = [1,2,3]; ...
- python学习笔记十三 JS,Dom(进阶篇)
JS介绍 JavaScript 是属于网络的脚本语言!JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用:JavaScript 是因特网上最流 ...
- JavaScript基础15——js的DOM对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery对象与JS原生dom对象之间的转换
jQuery就是JS的一个扩展库,工具库,提供很多方便快捷的方法,所以将JS对象转换为jQuery对象后,能更方便地操作这个对象.但是jQuery对象也不是万能的,有一些JS对象有的能,jQuery对 ...
- JS之DOM编程
为什么学dom编程? 通过dom编程,我们可以写出各种网页游戏 dom编程也是我们学习ajax技术的基础,所以我们必需掌握好dom编程. dom编程简介 DOM=Document Object Mo ...
- Js之DOM(一)
----------------------------------------------------------------------------------------------第一部分 D ...
- JS1 js获取dom元素方法
js获取dom元素方法 1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId") 其 ...
随机推荐
- Linux环境上部署Flask
[该文章只涉及个人部署的简单流程,读者可通过其它途径了解详细部署流程] 依个人部署项目可预先安装好需要的环境,这里已提前安装好LNMP环境 1.安装Python环境 安装virtualenv环境 配置 ...
- Spring boot 源码分析(前言)
开坑达人 & 断更达人的我又回来了 翻译的坑还没填完,这次再开个新坑= = 嗯,spring boot的源码分析 本坑不打算教你怎么用spring boot = = 也不打算跟你讲这玩意多方便 ...
- Python在终端通过pip安装好包以后,在Pycharm中依然无法使用的解决办法
在终端通过pip装好包以后,在pycharm中导入包时,依然会报错.新手不知道具体原因是什么,我把我的解决过程发出来. pip install 解决方案一: 在Pycharm中,依次打开File--- ...
- Upload a file with $.ajax to AWS S3 with a pre-signed url
转载自:https://gist.github.com/guumaster/9f18204aca2bd6c71a24 生成预签名的Demo文档:https://docs.aws.amazon.com/ ...
- volatile CAS区别
- OO第二次博客作业—17373247
OO第二次博客作业 零.写在前面 OO第二单元宣告结束,在这个单元里自己算是真正对面向对象编程产生了比较深刻的理解,也认识到了一个合理的架构为编程带来的极大的便利. (挂三次评测分数 看出得分接近等差 ...
- 基于vue项目一键国际化通用方案: vue-i18n + i18n-vue-cli(命令行工具)
鉴于公司有做的国际化需求,对于公司的vue项目,觉得页面还是挺多的.刚开始觉得很简单,就是把vue文件中的中文,替换成变量,提取成一个文件就可以了,谁知道人肉的提取的部分确实太痛苦了,而且容易出错.最 ...
- win7有多条隧道适配器(isatap、teredo、6to4)的原因及关闭方法
问题:sdp协商时,带有IPV6的信息,需要将IPV6相关信息去掉 原因:网卡启用了ipv6通道 解决:关闭IPv6数据接口 netsh interface isatap set state disa ...
- LintCode 1.A+B的问题
LintCode 1.A+B的问题 描述 给出两个整数 a 和 b , 求他们的和. 答案 public class Solution { /** * @param a: An integer * @ ...
- Java基础语法(二)之流程控制语句
流程控制语句是用来控制程序中各语句执行顺序的语句,可以把语句组合成能完成一定功能的小逻辑模块 .控制语句分为三类:顺序,选择和循环. “顺序结构”代表”先执行a,再执行b”的逻辑.比如,先找个女朋友, ...