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 有什么区别?