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 ()
更多方法操作见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 这四个之间的关系？
