内容预览

1.BOM的概念及简单使用

2.DOM的概念及简单使用

3.事件监听机制的简单了解

一、BOM

1.1 BOM的概念及组成

BOM：Browser Object Model 浏览器对象模型

• 将浏览器的各个组成部分封装成对象。

BOM的组成

• Window：窗口对象
• Navigator：正在使用的浏览器对象
• Screen：显示器屏幕对象
• History：历史记录对象
• Location：地址栏对象

1.2 BOM对象的基本用法

1.2.1 Window：窗口对象

1.常用方法

1. 与弹出框有关的方法

• alert()：显示带有一段消息和一个确认按钮的警告框。

• confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。

  • 如果用户点击确定按钮，则方法返回true
  • 如果用户点击取消按钮，则方法返回false

• prompt()：显示可提示用户输入的对话框。

  • 返回值：获取用户输入的值

2. 与打开关闭有关的方法

• close()：关闭浏览器窗口。
  • 谁调用我 ，我关谁
• open()：打开一个新的浏览器窗口
  • 返回新的Window对象

3. 与定时器有关的方法

• setTimeout()：在指定的毫秒数后调用函数或计算表达式。简单得说就是几秒之后，你把我交给你得任务执行了。执行一次。
  • 参数：
    1. js代码或者方法对象
    2. 毫秒值
  • 返回值：唯一标识，用于取消定时器
• clearTimeout()：取消由 setTimeout() 方法设置的 timeout。
• setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。简单的说就是每几秒执行一次，无限执行。
• clearInterval()：取消由 setInterval() 设置的 timeout。

2.属性

1. 获取其他BOM对象：

   • location对象
   • history对象
   • Navigator对象
   • Screen对象

2. 获取DOM对象

   • document

3.特点

• Window对象不需要创建可以直接使用 window使用。 window.方法名();
• window引用可以省略。 方法名();

1.2.2 Location：地址栏对象

1. 创建（获取）Location对象

   • window.location
   • location

2. 方法

   • reload()：重新加载当前文档。刷新

3. 属性

   • href：设置或返回完整的 URL。

1.2.3 History：历史记录对象

1. 创建（获取）History对象

   • window.history
   • history

2. 方法

   • back()：加载 history 列表中的前一个 URL。
   • forward()：加载 history 列表中的下一个 URL。
   • go(参数)：加载 history 列表中的某个具体页面。
     • 参数：
       1. 正数：前进几个历史记录
       2. 负数：后退几个历史记录

3. 属性

   • length 返回当前窗口历史列表中的 URL 数量。

二、DOM

2.1 DOM概念

DOM： Document Object Model 文档对象模型。

• 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

• W3C DOM 标准被分为 3 个不同的部分：

  • 核心 DOM - 针对任何结构化文档的标准模型
  • XML DOM - 针对 XML 文档的标准模型
  • HTML DOM - 针对 HTML 文档的标准模型

DOM使得html形成一棵树，我们获取到的DOM元素是一个对象（object）,包含元素、属性、文档。

2.2 DOM操作

2.2.1 创建

• document.write(无用,知道有这个方法就行，这个函数是在script中写html，事实上我们可以直接在body标签体内写html)

  • Javascript 中只能在 HTML 输出流中使用 document.write，在文档已加载后使用它（比如在函数中），会覆盖整个文档。
  • 用 javascript 编写的代码只能通过 html/xhtml 文档才能执行，代码一行一行解析，文档在加载的过程中实际是一边加载一边用 document.write 写出内容到屏幕上，而加载完成后，document 就关闭。如果再调用 document.write 往网页上写内容的话，就会重写 document。

• innerHTML：标签体的设置和获取(重点掌握)

  标签体的设置和获取：innerHTML
  	* 获取标签体内容
  		var inner = div.innerHTML;
  	* div中替换一个标签体内容
  		div.innerHTML = “<input type = ‘text‘”>;
  	* div标签体中追加一个输入框
  		div.innerHTML += “<input type = ‘text‘”>;
  

• 创建节点对象

  • createElement()：创建任意节点对象。
  • createAttribute(name)：创建属性对象
  • createTextNode()：创建文本对象

2.2.2 增

• appendChild

• insertBefore

  // 添加节点  node.insertBefore(child,指定元素);
  var lili = document.createElement(‘li‘);
  ul.insertBefore(lili,ul.chilNodes[0]);
  

2.2.3 删

• removeChild

2.2.4 改

主要修改DOM的元素属性，DOM元素的内容、属性、表单的值等

• 修改元素属性： src、href、title等
• 修改普通元素内容：innerHTML、innerText
• 修改表单元素：value、type、disabled等
• 修改元素的样式：style、className等

2.2.5 查

• DOM提供的API方法：

• H5提供新方法：querySelector、querySelectorAll提倡

  //1.querySelector:获取文档中 id="demo" 的元素：
  document.querySelector("#demo");
  
  
  //2.querySelectorAll:获取文档中 class="example" 的所有元素:
  var x = document.querySelectorAll(".example");
  

• 利用document对象的一些属性操作获取元素：父（parentNode）、子（children）、兄（previousElementSibling、nextElementSibling） 提倡

  //返回 <li> 元素的 parentNode（父节点）：
  
  document.getElementById("item1").parentNode;
  

2.2.6 属性操作

主要针对自定义属性

• setAttribute()：设置DOM的的属性值
• getAttribute()：得到DOM的属性值
• removeAttribute()：移除属性

//1.设置 input 元素的 type 属性：
document.getElementsByTagName("INPUT")[0].setAttribute("type","button");

//2.获得链接的 target 属性：
document.getElementsByTagName("a")[0].getAttribute("target");
//结果：_blank

//删除 h1 元素的 style 属性：
document.getElementsByTagName("H1")[0].removeAttribute("style");

2.2.7 事件操作

1. 事件监听机制

   概念：当事件源(组件)上发生了某个事件，则触发执行某个监听器代码。比如，在“确定”按钮上发生了“单击事件”，便触发了表单提交的相关代码。

• 事件源：组件。如： 按钮、文本输入框...
• 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了...
• 监听器：代码。
• 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。

2. 常见事件

   • 点击事件

     1. onclick：单击事件
     2. ondblclick：双击事件
     

   • 焦点事件

   1. onblur：失去焦点
   2. onfocus:元素获得焦点。
   

   • 加载事件

     1. onload：一张页面或一幅图像完成加载。
     

   • 鼠标事件

     	    1. onmousedown	鼠标按钮被按下。
     		2. onmouseup	鼠标按键被松开。
     		3. onmousemove	鼠标被移动。
     		4. onmouseover	鼠标移到某元素之上。
     		5. onmouseout	鼠标从某元素移开。
     

   • 键盘事件

     1. onkeydown	某个键盘按键被按下。	
     2. onkeyup		某个键盘按键被松开。
     3. onkeypress	某个键盘按键被按下并松开。
     

   • 表单事件

     1. onsubmit	确认按钮被点击。
     2. onreset	重置按钮被点击。
     

   • 选择和改变

     1. onchange	域的内容被改变。
     2. onselect	文本被选中。
     

上一篇:JavaScript学习(一)

JavaScript学习(二)

原文：https://www.cnblogs.com/tianwenxin/p/14060659.html