JavaScript入门几个概念

最新推荐文章于 2024-12-20 21:00:07 发布

原创最新推荐文章于 2024-12-20 21:00:07 发布 · 208 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了JavaScript中DOM（文档对象模型）与BOM（浏览器对象模型）的基本概念及用法，包括DOM节点的属性、如何操作DOM节点，以及BOM如何控制浏览器行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚刚入门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.getElementByTagName("name")
- document.getElementByClassName("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}