3、BOM和DOM

BOM和DOM

1、BOM

1.1 BOM介绍

• JavaScript由三部分组成:

  • 核心(ECMAScript)
  • 浏览器对象模型(BOM)
  • 文档对象模型(DOM)

  ECMAScript：

  ​ 是一种由ECMA国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。ECMAScript 定义的只是这门语言的基础，他的组成部分有：语法、类型、语句、关键字、保留字、操作符、对象等

  BOM：

  ​ Browser Object Model, 浏览器对象模型，提供与浏览器交互的方法和接口(API ), 开发人员使用BOM可以控制浏览器显示页面以外的部分.

  DOM：

  ​ Document Object Model, 文档对象模型，提供访问和操作网页HTML内容的方法和接口

1.2 BOM的基本使用

• BOM的核心：

  window对象（全局）

• window对象的方法:

  alert(text): 弹出提示框(警告框)
  confirm(): 创建一个需要用户确认的对话框
  prompt(text,defaultInput) : 创建一个对话框要求用户输入信息
  open(url,name,[options]) : 打开一个新窗口并返回新 window 对象location对象中的方法：
  location.href = ‘http://www.baidu.com’ //跳转到指定的URL
  location.reload(); //最有效的重新加载,有缓存加载

2、DOM获取及核心属性

2.1 DOM的概念

​ DOM就是Document Object Model(文档对象模型)的缩写，

​ DOM 是 W3C（万维网联盟）的标准。

​ DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

2.2 DOM节点分类

​ DOM节点分为三种:

​ 元素节点, 属性节点和文本节点

​ 例如: <div title= "属性节点" >测试Div</div>

​ <div></div>: 元素节点(最重要)

​ title=“属性节点”: 属性节点

​ 测试Div : 文本节点

2.3 元素节点对象的获取方式:

​ getElementById(): 获取特定ID元素的节点对象(返回一个对象)

​ getElementsByTagName(): 获取指定标签名的节点列表(返回一个数组)

​ getElementsByName(): 获取相同name属性值的节点列表(返回一个数组)

​ getElementsByClassName() : 通过class来获取节点列表

• getElementById()

  ​ getElementById()需要给一个参数: 元素节点的id属性值。如果找到相应的元素则返回该元素的元素节点对象，如果不存在，则返回 null。

  例如:

  // 获取 id 为 box 的元素节点      
  var box = document.getElementById('box'); 
  

  注意: 如果id值存在, 但是返回null，则是执行顺序的问题

  解决方法:

  ​ 1.把<script>标签(JS代码)移到html结构后面；

  ​ 2.使用onload事件来处理， onload事件会在html加载完毕后再调用。

  //加载 html 后执行  
  window.onload=function() {             
  	document.getElementById('box');  //id具有唯一性
  };
  

2.4元素节点的属性

• innerHTML: 元素节点中的内容（重要）
• value: 输入框的内容（重要）
• className: 元素节点的class属性值（重要）
• style: css内联样式对象（重要）
• tagName: 元素节点对象所指向的标签名称
• children: 某元素的所有子元素节点
• parentNode: 某元素的父元素

3、DOM节点操作

3.1 DOM节点操作:

​ 创建节点、添加节点、删除节点和复制节点等.

3.2 DOM操作所涉及的方法有:

​ createElement(); 创建一个元素节点

​ appendChild(); 添加一个新子节点到子节点的末尾

​ cloneNode(); 复制节点

​ removeChild(); 移除节点

3.3 JS事件中this关键字的使用

在JS事件中, this表示触发事件的元素节点对象;

var box = document.getElementById('box'); 
box.onclick = function() { 
	console.log(this);  //this表示box对象 
};

通过for循环添加事件, 使用this

var aInput = document.getElementsByTagName('input');
for (var i=0; i<aInput.length; i++) {
    aInput[i].onclick = function() {                 
		console.log(this.value);  //这里的this表示被点击的那个input元素节点对象  
 	};
}