web程序设计 第四课 - javascript基础2

Web程序设计(考研)

javascript与HTML文档

DOM简介

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

window与document对象

1. Window 对象表示浏览器中打开的窗口。如果
   文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
2. 每个载入浏览器的 HTML 文档都会成为 Document 对象。
   Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
   提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

js操作document对象

访问

1. document.getElementById：访问带有指定ID的标签
2. document.getElementsByTagName：访问指定的名称的标签
3. docuemnt.getElementsByClassName：访问带有指定的Class名称的标签
4. document.querySelector：根据选择器来访问元素
5. document.querySelectorAll：根据选择器来访问所以的指定的元素

创建

1. document.createElement：创建指定的HTML元素
2. ele.textContent：获取和设置文本节点
3. ele.className：获取和设置元素的类值
4. ele.getAttribute：获取标签指定的属性信息
5. ele.setAttribute：设置标签指定的属性信息和值

添加

1. aimNode.appendChild(newNode)：将新节点追加到指定节点的尾部
2. parentNode.insertBefore(newNode, aimNode)：将新节点插入目标节点的前边(同胞节点)

删除

1. parentNode.removeChild(aimNode)：删除指定节点下的目标节点
2. aimNode.remove()：删除指定的节点

节点之间的关系

js添加事件

要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。
在JavaScript中，有三种常用的绑定事件的方法：

• 在DOM元素中直接绑定；
• 在JavaScript代码中绑定；
• 绑定事件监听函数。

一. 在DOM元素中直接绑定

这里的DOM元素，可以理解为HTML标签。JavaScript支持在标签中直接绑定事件，语法为：
onXXX="JavaScript Code"
其中：

• onXXX 为事件名称。例如，鼠标单击事件 onclick ，鼠标双击事件 ondouble，鼠标移入事件
• onmouseover 鼠标移出事件 onmouseout 等。
• JavaScript Code 为处理事件的JavaScript代码，一般是函数。

例如，单击一个按钮，弹出警告框的代码有如下两种写法。
1.原生函数

<input  onclick="alert('谢谢支持')"  type="button"  value="点击我，弹出警告框" />    

2.自定义函数

<input  onclick="myAlert()"  type="button"  value="点击我，弹出警告框" />
<script type="text/javascript">
function myAlert(){
    alert("谢谢支持");
}
</script>  

二. 在JavaScript代码中绑定

在JavaScript代码中（即<script>标签内）绑定事件可以使JavaScript代码与HTML标签分离，文档结构清晰，便于管理和开发。
在JavaScript代码中绑定事件的语法为：

elementObject.onXXX=function(){
    // 事件处理代码
} 

其中：

• elementObject 为DOM对象，即DOM元素。
• onXXX 为事件名称。

例如，为 id="demo" 的按钮绑定一个事件，显示它的 type 属性：

<input  id="demo"  type="button"  value="点击我，显示 type 属性" />
<script type="text/javascript">
document.getElementById("demo").onclick=function(){
    alert(this.getAttribute("type"));  //  this 指当前发生事件的HTML元素，这里是<div>标签
}
</script>  

三. 绑定事件监听函数

绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。
addEventListener()函数语法：

elementObject.addEventListener(eventName,handle,useCapture);  

注意：事件句柄函数是指“ 函数名 ”，不能带小括号
示例代码如下：

<input  id="demo"  type="button"  value="点击我，显示 type 属性" />
<script type="text/javascript">
var ele = document.getElementById("demo");
ele.addEventListener("click", function(event) {
    console.log(event.target.getAttribute("type"));
}, false)
</script>  

附录

作业

1. 完成todolist任务： 作业答案地址