JavaScript入门几个概念
JavaScript入门几个概念
刚刚入门JavaScript的时候,搞懂DOM、BOM以及它们的对象document和window很有必要。
- DOM是为了操作文档出现的API,document是它的一个对象。
- BOM是为了操作浏览器出现的API,window是它的一个对象。
DOM
When a web page is loaded, the browser creates a Document Object Model of the page.
DOM(Docment Object Model文档对象模型)
DOM就是针对 HTML 和 XML 提供的一个API。什么意思?就是说为了能以编程的方法操作这个 HTML 的内容(比如添加某些元素、修改元素的内容、删除某些元素),我们把这个 HTML 看做一个对象树(DOM树),它本身和里面的所有东西比如<div></div>
这些标签都看做一个对象,每个对象都叫做一个节点(node),节点可以理解为 DOM 中所有 Object 的父类。
DOM节点常用属性
- innerHTML属性: 获取元素的内容,包括元素里面的HTML标签
- nodeName属性: 节点的名称(nodeName是只读的,nodeName始终包含HTML元素的大写字母标签名)
- 元素节点的nodeName与标签名相同
- 属性节点的nodeName与属性名相同
- 文本节点的nodeName始终是#text
- 文档节点的nodeName始终是#document
- nodeValue属性:节点的值
- 元素节点的nodeValue是undefined或null
- 文本节点的nodeValue是文本本身
- 属性节点的nodeValue是属性值
- nodeType属性: 节点的类型
- 元素节点
- 文本节点
- 属性节点
- 注释节点
- 文档
详细例子参见W3school
Dom 操作
由上图可知Docment为根节点,对于使用iframe嵌入网页来说,Document可以有很多个。通过Docment访问其任何子节点,以此进行增删改查元素的内容、样式、响应事件等等实现更改网页的交互方式。以下为一些常见操作:
- 找到节点
- document.getElementById("id")
- document.getElementsByTagName("name")
- document.getElementsByClassName("name")
- 访问类的时候,返回的是一个数组,当把它传给变量var y的时候,在使用这个节点时,使用y[0]。
- 改变节点
- object.innerHTML = new html content
- object.atrribute = new value
- object.setAtrribute(attribute, value)
- Object.style.property = new style
- 增删节点
- document.creatElement(element)
- document.removeChild(element)
- document.appendChild(element)
- document.replaceChild(element)
- document.write(text)
- 绑定事件
- document.getById("id").onclick = function () {code block}
更多方法操作见w3school
JavaScript不能真正改变DOM,仅仅是改变呈现内容,当页面刷新的时候统统会还原,但是我们可以把这些改变提交给服务器,通过后端语言(如PHP)来改变底层数据。
对于用户的一般互动如弹窗等不需要服务器参与,只需JavaScript操作DOM响应反馈即可。
BOM
BOM(Browser Object Model ),通过这个接口允许JavaScript控制浏览器的行为
下图中A、B、C、D均为BOM操作的对象
其中window是浏览器一个对象
- 打开新窗口
- window.open( [URL], [窗口名称], [参数字符串] )
- 关闭窗口
- window.close( )
- .close( )
实例应用
完成的功能为:用户可以在输入框中输入任何内容,点击“确认填写”按钮后,用户输入的内容会显示在“您输入的值是”文字的右边
- 点我预览
扩展阅读
- JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系?jQuery中的text()、html()和val() ?
- 关于 DOM 事件使用的摘记
- JavaScript、jQuery、AJAX、JSON 这四个之间的关系?
参考资料
- DOM 是什么?
- DOM, DOCUMENT, BOM, WINDOW 有什么区别?
转载于:https://www.cnblogs.com/jecyu/p/7399072.html
JavaScript入门几个概念相关推荐
- 《jQuery与JavaScript入门经典》——第 1 章 动态Web编程简介 1.1理解Web服务器浏览器范式...
本节书摘来自异步社区<jQuery与JavaScript入门经典>一书中的第1章,第1.1节,作者:[美]Brad Dayley著,更多章节内容可以访问云栖社区"异步社区&quo ...
- JavaScript入门(part9)--函数
学习笔记,仅供参考,有错必纠 参考自:pink老师教案 文章目录 JavaScript入门 函数 函数的概念 函数的使用 函数的参数 函数的返回值 arguments的使用 函数的两种声明方式 Jav ...
- JavaScript入门(part8)--数组
学习笔记,仅供参考,有错必纠 参考自:pink老师教案 文章目录 JavaScript入门 数组 数组的概念 创建数组 获取数组中的元素 数组的length属性 JavaScript入门 数组 数组的 ...
- JavaScript入门(part7)--流程控制
学习笔记,仅供参考,有错必纠 参考自:pink老师教案 文章目录 JavaScript入门 流程控制 流程控制概念 顺序流程控制 分支流程控制 三元表达式 switch分支流程控制 for循环 双重f ...
- javascript入门_JavaScript入门手册(2020版)
javascript入门 JavaScript is one of the most popular programming languages in the world. JavaScript是世界 ...
- JavaScript入门笔记
第一章 JavaScript语法 1.1 初识JavaScript 1.3 数据类型 1.4 string和boolean类型 1.5 算数操作符 第二章 JavaScript流程控制语句 2.1 循 ...
- [转载] javascript入门_WebAssembly入门-仅使用14行JavaScript
参考链接: WebAssembly-使用Rust by Daniel Simmons 丹尼尔·西蒙斯(Daniel Simmons) WebAssembly入门-仅使用14行JavaScript (G ...
- JavaScript入门 Day1
课程介绍 编程语言介绍(了解) JavaScript简介(了解) JavaScript入门 运算符(掌握) JavaScript基本语法(掌握) 位运算符(了解) 1.编程语言 1.1.什么是编程语言 ...
- 前端三剑客 HTML、CSS、JavaScript 入门到上手
前端三剑客 1. HTML基础使用 1.1 HTML 入门实例 1.2 HTML 常见标签 ① 注释标签 ② 标题标签 ③ 段落标签 ④ 换行标签 HTML转义字符 ⑤ 格式化标签 ⑥ 图片标签 ⑦ ...
最新文章
- 大佬云集的「乌镇峰会」,悄悄释放出1个重要信号
- LintCode 1692. 组队打怪(田忌赛马,二分查找)
- 蛋壳公寓回应破产传闻:没有破产 也不会跑路
- 【机器学习】一文详尽系列之EM算法
- redis 数据结构笔记
- LuoguP4012 深海机器人问题(费用流)
- 【2019杭电多校第五场1007=HDU6630】permutation 2(打表找规律+分情况讨论)
- 中国石油大学《马克思主义基本原理》第三阶段在线作业
- c#动态加载dll并调用dll中类的方法
- STM32F103_study49_The punctual atoms(STM32 Bit operation and logical operation in C language )
- 尤雨溪 vue 3.0 Bate
- 发布苹果App有哪些步骤流程
- UG NX 12抽取体特征
- ArrayList类的详解
- 北斗ATGM332D定位 gps驱动
- 稀疏矩阵的十字链表存储表示和实现(第五章 P104 算法5.4)
- 前端请求报:NET::ERR_INCOMPLETE_CHUNKED_ENCODING,响应200,但接收不到正常响应
- 基于CAD纵断面图生成地质体模型
- 机器自动翻译古文拼音 - 十大宋词 - 满江红 怒发冲冠 南宋·岳飞
- 怎么用计算机弹出行星,宇宙模拟器space engine教程2:创建自定义太阳系,包括创建恒星,行星等(上)...
热门文章
- 系统微服务签发token
- python deque索引超出范围_Python基础语法
- Python正则表达式笔记
- Markdown常用转义字符
- 计算机配置界面在那,在哪里设置关机画面?设置为原来的经典界面?
- android strm,Android 关于so文件的随记
- python源码文件以什么格式结尾结尾_查看python源码,发现里面的函数都以pass结尾,那么意义何在?...
- linux 的ip 设置lo_Linux服务器设置静态IP的方法
- mysql int number_Oracle/MySQL decimal/int/number 转字符串
- 一文解读光纤收发器单模和多模的区别!