第5天_BOM和DOM

第5天_BOM和DOM

1. 学习目标

• BOM
• DOM获取及核心属性
• DOM操作

2. BOM

2.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内容的方法和接口

2.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(); //最有效的重新加载,有缓存加载

3.DOM获取及核心属性

3.1 DOM的概念

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

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

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

3.2 DOM节点分类

DOM节点分为三种:  

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

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

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

	title="属性节点":  属性节点

	测试Div :  文本节点

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

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

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

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

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

• getElementById()
  getElementById()需要给一个参数: 元素节点的id属性值。如果找到相应的元素则返回该元素的元素节点对象，如果不存在，则返回 null。
  例如:
  // 获取 id 为 box 的元素节点
  var box = document.getElementById(‘box’);
  注意: 如果id值存在, 但是返回null，则是执行顺序的问题
  解决方法:
  1.把

3.4元素节点的属性

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

练习：

写一个定时器, 每隔0.1秒修改一次div内文字颜色(随机）和文字大小.  最开始这个文字是默认大小, 开启定时器后文字大小开始增大, 当增大了6次以后, 文字大小开始缩小, 缩小6次, 文字再开始增大…

4.DOM节点操作

4.1 DOM节点操作:

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

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

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

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

cloneNode(); 复制节点      

removeChild(); 移除节点

4.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元素节点对象  
 	};
}

练习：

动态表格的创建, 在输入框中输入内容后,点击保存则在表格末尾添加一条记录, 点击删除则会删除对应行的记录