JS 的事件和 BOM操作

JS — 事件和 BOM

一.事件

事件(Event)是 JavaScript 应用跳动的心脏，进行交互，使网页动起来。当我们与浏览器

中 Web 页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、

鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情，

比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。

通过使用 JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件

做出响应。

1. 作用

（1）验证用户输入的数据。

（2）增加页面的动感效果。

（3）增强用户的体验度

2. 事件中几个名词

事件源: 谁触发的事件

事件名: 触发了什么事件

事件监听: 谁管这个事情，谁监视？

事件处理:发生了怎么办

例如

闯红灯事件源-:车 ; 事件名: 闯红; 监听：摄像头、交警 ; 处理:扣分罚款

单击按钮事件源:按钮; 事件名: 单击; 监听:窗口 ; 处理:执行函数

当我们用户在页面中进行的点击动作，鼠标移动的动作，网页页面加载完成的动作等，都

可以称之为事件名称，即：click、mousemove、load 等都是事件名称，具体的执行代码处理，

响应某个事件的函数。

function loadWindow(){

alert("加载窗体");

}

</script>

3. 事件类型

JavaScript 可以处理的事件类型为：鼠标事件、键盘事件、HTML 事件。

http://www.w3school.com.cn/tags/html_ref_eventattributes.asp 用+查

Window 事件属性 :针对 window 对象触发的事件（应用到 <body> 标签）

Form 事件 :由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用

在 form 元素中）

Keyboard 事件 : 键盘事件

Mouse 事件 :由鼠标或类似用户动作触发的事件

Media 事件 :由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但

常见于媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及 <video>）

几个常用的事件：

onclick 、onblur 、onfocus 、onload 、onchange、onmouseover、onmouseout、

onkeyup、onkeydown

onload：当页面或图像加载完后立即触发

onblur：元素失去焦点

onfocus：元素获得焦点

onclick：鼠标点击某个对象

onchange：用户改变域的内容

onmouseover：鼠标移动到某个元素上

onmouseout：鼠标从某个元素上离开

onkeyup：某个键盘的键被松开

onkeydown：某个键盘的键被按下

4. 事件流和事件模型

我们的事件最后都有一个特定的事件源，暂且将事件源看做是 HTML 的某个元素，那么当

一个 HTML 元素产生一个事件时，该事件会在元素节点与根节点之间按特定的顺序传播，路径

所经过的节点都会受到该事件，这个传播过程称为 DOM 事件流。

事件顺序有两种类型：事件捕获和事件冒泡。

冒泡和捕获其实都是事件流的不同表现，这两者的产生是因为 IE 和 Netscape 两个大公司

完全不同的事件流概念产生的。（事件流：是指页面接受事件的顺序）IE 的事件流是事件冒泡，

Netscape 的事件流是事件捕获流。

事件冒泡

IE 的事件流叫做事件冒泡，即事件开始时由最具体的元素接受，然后逐级向上传播到较为

不具体的节点（文档）。例如下面的：

<!DOCTYPE html>

<html>

<head>

<title>JavaScript</title>

</head>

<body>

<div id="myDiv">Click me</div>

</body>

</html>

如果点击了页面中的<div>元素，那么这个 click 事件会按照如下顺序传播：

1、<div>

2、<body>

3、<html>

4、document

也就是说，click 事件首先在<div>元素上发生，而这个元素就是我们单击的元素。然后，

click 事件沿 DOM 树向上传播，在每一级节点上都会发生，知道传播到 document 对象。

所有现代浏览器都支持事件冒泡，但在具体实现上还是有一些差别。

事件捕获

Netscape 提出的另一种事件流叫做事件捕获，事件捕获的思想是不太具体的节点应该更早

接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标

之前捕获它。还以前面的例子为例。那么单击<div>元素就会按下列顺序触发 click 事件：

1、document

2、<html>

3、<body>

4、<div>

在事件捕获过程中，document 对象首先接收到 click 事件，然后沿 DOM 树依次向下，一

直传播到事件的实际目标，即<div>元素。

虽然事件捕获是 Netscape 唯一支持的事件流模式，但很多主流浏览器目前也都支持这种事

件流模型。尽管“DOM2 级事件”规范要求事件应该从 document 对象开始四川博，但这些浏

览器都是从 window 对象开始捕获的。

DOM 事件流

“DOM2 级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡

阶段。首先发生的是事件捕获阶段，为截获事件提供了机会。然后是实际的目标接收到事件。

最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。

5. 事件处理程序

事件就是用户或浏览器自身执行的某种动作。例如 click、load 和 mouseover 都是事件的名

字，而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以

“on”开头，因此 click 事件的事件处理程序就是 onclick，为事件指定处理程序的方式有好几

种。

HTML 事件处理程序

某个元素支持的每种事件，都可以用一个与相应事件处理程序同名的 HTML 特性来指定。

这个特性的值应该是能够执行的 JavaScript 代码：

<input type="button" value="Press me" onclick="alert('thanks');"

这样做有一些缺点，例如耦合度过高，还可能存在时差问题（当用户点击按钮时，处理函

数还未加载到，此时处理函数是单独写的一段 js 代码），而且在不同的浏览器上可能会有不同

的效果。

DOM0 级事件处理程序

通过 JavaScript 指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序

属性。这种方式被所有现代浏览器所支持。这种方式首先必须取得一个要操作的对象的引用，

每个元素都有自己的事件处理程序属性，这些属性通常全都小写，例如 onclick，然后将这种属

性的值设为一个函数，就可以指定事件处理程序了。例如：

<body>

var btn = document.getElementById('myBtn')

btn.onclick = function(){

alert('you click a button')

}

</script>

</body>

以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。而且，只能为同一个元素

的同一个事件设定一个处理程序（覆盖），也可以通过删除 DOM0 级方法指定的事件处理程序，

只要将属性值设为 null 即可：

btn.onclick = null

DOM2 级事件处理程序

“DOM2 级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：

addEventListener()和 removeEventListener()。所有 DOM 节点都包含这两个方法，并且

他们都接受 3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布

尔值参数如果是 true，则表示在捕获阶段调用事件处理程序；如果是 false 则表示在冒泡阶段

调用事件处理程序。

<body>

var btn = document.getElementById('myBtn')

btn.addEventListener('click',function(){

alert('you add a eventListener by DOM2')

},false)

btn.addEventListener('click',function(){

alert('you add a eventListener by DOM2 again')

},false)

function thread(){

alert('you add a eventListener by DOM2 第三次')

}

btn.addEventListener('click',thread,false)

btn.removeEventListener('click',thread,false)

</script>

</body>

这种方式可以为同一个元素的同一个事件添加多个处理函数。还可删除事件处理函数，注

意，在删除的时候，不能删除匿名处理函数。

二.BOM

ECMAScript 是 JavaScript 的核心，但如果要在 Web 中使用 JavaScript，那么 BOM（浏览

器对象模型）则无疑才是真正的核心。BOM 提供了很多对象，用于访问浏览器的功能，这些功

能与任何的网页内容无关。多年来，缺少事实上的规范导致 BOM 既有意思又有问题，因为浏

览器厂商会按照各自的想法随意去扩展它。于是，浏览器之间共有的对象就成为了事实上的标

准。这些对象在浏览器中得以存在，很大程度上是由于他们提供了与浏览器的互操作型。W3C

为了把浏览器中 JavaScript 最基本的部分标准化，已经将 BOM 的主要方面纳入了 HTML5 的规

范当中。

1. Window 对象

BOM 的核心对象是 window，它表示浏览器的一个实例。window 对象有双重角色，它既是

通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。这意味着

在网页中定义的任何一个对象、变量和函数，都以 window 作为其 Global 对象，因此有权访问

parseInt()等方法。如果页面中包含框架，则每个框架都拥有自己的 window 对象，并且保存在

frames 集合中。在 frames 集合中，可以通过数值索引（从 0 开始，从左至右，从上到下）或

者框架的名称来访问相应的 window 对象。

window 对象方法

1 ）系统对话框

浏览器通过（实际是 window 对象的方法）alert()、confirm()、prompt()方法可以调用系

统对话框向用户显示消息。

（1）消息框:alert，常用。

alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。

（2）输入框:prompt，返回提示框中的值。

prompt() 方法用于显示可提示用户进行输入的对话框。

参数（可选）：

第一个参数：要在对话框中显示的纯文本。

第二个参数：默认的输入文本。

（3）确认框:confirm，返回 true/false.

confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。

例如：

#aa{

border: 1px solid red;

height: 100px;

}

</style>

<body>

This is a div

</div>

//1.警告框

function testAlert(){

alert('警告框！！！');

}

//2.输入框

function testPrompt(){

var item = prompt('请输入年龄');//item 得到输入的值

//console.log(item)

//alert(prompt('请输入年龄',18));//将输入的值输出

}

3.确认框

返回值：boolean（true|false）

* */

function testComfirm(){

var result = confirm('真的要改吗？');

if(result){

var ele = document.getElementById("aa");

ele.style.color="red";

ele.innerHTML="<span>fdsfsd</span>";

}else{

alert("没事别瞎点。。。");

}

</script>

</body>

2 ）打开窗口

window.open() 方法既可以导航到一个特定的 URL 也可以用来打开一个新的窗口

function openSxt(){

window.open('http://www.shsxt.com','_self');

//window.open(); //空白窗口

}

</script>

_self、_parent、_top、_blank

3 ）关闭窗口

window.close()：关闭窗口。

例：点击按钮关闭当前窗口。

4 ）时间函数

setTimeout() : 在指定的毫秒数后调用函数或计算表达式。通过返回的标识也可以

cliearTimeout(id) 来清除指定函数的执行

var id = setTimeout(function,times)

clearTimeout(id)

setTimeout()

//延迟 3 秒后出现 alert

function hello() {

alert("对不起, 要你久候");

}

setTimeout("hello()", 3000);

var timeout;

function init(){

//拿到当前时间

var date = new Date();

var time = date.toLocaleString();

//拿到相应对象

var h1 = document.getElementById('h1');

//根据需求添加样式

if(0==date.getSeconds()){ //当时间的秒数变成 0 时，显示红色字体

h1.innerHTML = '<span

style="color:red">'+time+'</span>';

} else {

h1.innerHTML = time;

}

* 定时操作，只执行一次

第一个参数：执行的方法；第二个参数：定时，单位是毫秒

* */

setTimeout(init,1000); //等多少时间来执行

}

//window.setTimeout(init,1000);//只执行一次

//停止操作

function stopShow () {

clearTimeout(timeout);

}

</script>

</body>

在 times 毫秒后执行 function 指定的方法，执行之前也可以取消

setInterval() :可按照指定的周期（以毫秒计）来调用函数或计算表达式，也可根据

返回的标识用来结束。该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

var id = setInterval(function,times)

clearInterval(id)

function test(){

console.log(".....");

}

//window 是一个全局对象，通过全局对象调用 setInterval()函数来

window.setInterval(test,1000);

window 对象属性

window 对象的双重身份决定着，在该对象中既有着核心语法中的全局方法和属性，又有

着和浏览器相关的属性和方法，一下的一些对象都是属于 window 对象的属性值。

2. histroy 对象

history 对象是历史对象。包含用户（在浏览器窗口中）访问过的 URL。history 对象是

window 对象的一部分，可通过 window.history 属性对其进行访问。

history 对象的属性：length，返回浏览器历史列表中的 URL 数量。

history 对象的方法：

back()：加载 history 列表中的前一个 URL。

forward()：加载历史列表中的下一个 URL。当页面第一次访问时，还没有下一个 url。

go(number|URL): URL 参数使用的是要访问的 URL。而 number 参数使用的是要访

问的 URL 在 History 的 URL 列表中的相对位置。go(-1)，到上一个页面

013-history.html

<body>

<a href="013-history-a.html">013-history-a.html</a>

<h1>我是第一个页面</h1>

<input type="button" name="" id="" value="前进"

onclick="window.history.forward();" />

console.log(window.history);

</script>

</body>

013-history-a.html

<body>

<a href="013-history-b.html">013-history-b.html</a>

<input type="button" name="" id="" value="后退"

onclick="window.history.back();"/>

</body>

013-history-b.html

<body>

<input type="button" name="" id="" value="第一个页面"

onclick="window.history.go(-2);"/>

<input type="button" name="" id="" value="后退"

onclick="window.history.back();"/>

</body>

3. location 对象

location 对象是 window 对象之一，提供了与当前窗口中加载的文档有关的信息，还提供

了一些导航功能。也可通过 window.location 属性来访问。

location 对象的属性 href：设置或返回完整的 URL

location 对象的方法

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

replace()：用新的文档替换当前文档。

function openSXT(){

//没有历史记录,用新的文档替换当前文档

//window.location.replace("http://www.baidu.com");

//console.log(window.location.href);//获取完整的 url

window.location.href = "http://www.baidu.com";

}

</script>

<body>

<input type="button" name="" id="" value="刷新"

onclick="window.location.reload();" />

<input type="button" name="" id="" value="SHSXT 官网"

onclick="openSXT();" />

</body>

4. document 对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚

本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，也可通

过 window.document 属性对其进行访问。

document 对象的 body 属性，提供对<body>元素的直接访问，cookie 属性，用来设置

或返回与当前文档有关的所有 cookie，write()方法，向文档写 HTML 表达式或 JavaScript 代码。

还有其他属性和方法。在 Document 对象中讲解。

该对象作为 DOM 中的核心对象

JS中的DOM

一.定义

DOM：Document Object Model 文档对象模型

要实现页面的动态交互效果，bom 操作远远不够，需要操作 html 才是核心。如何操作

htm，就是 DOM。简单的说，dom 提供了用程序动态控制 html 接口。DOM 即文档对象模型描

绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。dom 处于

javascript 的核心地位上。

每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚

本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，可通过

window.document 属性对其进行访问。

二、节点

加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这

种树型结构理解为由节点组成，组成一个节点树。对于页面中的元素，可以解析成以下几种类

型的节点：

节点类型 HTML 内容例如

文档节点文档本身整个文档 document

元素节点所有的 HTML 元素 <a>、<div>、<p>

属性节点 HTML 元素内的属性 id、href、name、class

文本节点元素内的文本 hello

注释节点 HTML 中的注释

html -->文档节点

div -->元素节点

title -->属性节点

测试 Div -->文本节点

<html>

<head>

<title>树!树!到处都是树!</title>

</head>

<body>

</body>

</html>

三、元素节点的操作

当 HTML 文档在被解析为一颗 DOM 树以后，里面的每一个节点都可以看做是一个一个的

对象，我们成为 DOM 对象，对于这些对象，我们可以进行各式各样的操作，查找到某一个或

者一类节点对象，可以创建某种节点对象，可以在某个位置添加节点对象，甚至可以动态地删

除节点对象，这些操作可以使我们的页面看起来有动态的效果，后期结合事件使用，就能让我

们的页面在特定时机、特定的事件下执行特定的变换。

1. 获取节点

在进行增、删、改的操作时，都需要指定到一个位置，或者找到一个目标，此时我们就可

以通过 Document 对象提供的方法，查找、定位某个对象（也就是我们说的节点）。

注意：操作 dom 必须等节点初始化完毕后，才能执行。处理方式两种:

（1）把 script 调用标签移到 html 末尾即可；

（2）使用 onload 事件来处理 JS，等待 html 加载完毕再加载 onload 事件里的 JS。

window.onload = function () { //预加载 html 后执行};

获取方式如下：

方法和描述

getElementById() 根据 id 获取 dom 对象，如果 id 重复，那么以第一个为准

getElementsByTagName() 根据标签名获取 dom 对象数组

getElementsByClassName() 根据样式名获取 dom 对象数组

getElementsByName() 根据 name 属性值获取 dom 对象数组，常用于多选获取值

<body>

<p id="p1" class="para">这是一个段落<span>文本</span></p>

<p id="p1" class="para">这又是一个段落</p>

<input type="checkbox" name="hobby" value="游泳" />游泳

<input type="checkbox" name="hobby" value="篮球" />篮球

<input type="checkbox" name="hobby" value="足球" />足球

<hr />

<a href="javascript:void(0);" onclick="testById();">按照 id 获取

元素</a>

<a href="javascript:void(0);" onclick="testByName();">按照 name

获取元素</a>

<a href="javascript:void(0);" onclick="testByTagName();">按照

标签名获取元素</a>

<a href="javascript:void(0);" onclick="testByClass();">按照

class 获取元素</a>

</body>

说明：href="javascript:void(0)"：伪协议，表示不执行跳转，而执行指定的点击事

件。

//按照 id 获取元素

function testById() {

//返回单个对象

var p = document.getElementById("p1");

console.log(p);

console.log(p.innerHTML); //表示获取元素开始标签和结束标签

之间的 html 结构

console.log(p.innerText); //表示获取标签之间的普通文本

}

//按照 name 获取元素

function testByName() {

//对象数组

var ho = document.getElementsByName("hobby");

console.log(ho);

for(var i = 0; i <= ho.length - 1; i++) {

console.log(ho[i].value);

}

function testByTagName() {

//对象数组

var inputArr = document.getElementsByTagName("input");

for(var i = 0; i < inputArr.length; i++) {

if(inputArr[i].type == "text") {

console.log("text 类型");

} else if(inputArr[i].type == "checkbox") {

if(inputArr[i].checked) {

console.log(inputArr[i].value);

}

function testByClass() {

//对象数组

var ps = document.getElementsByClassName("para");

console.log(ps[0].innerHTML);

ps[0].innerHTML += "这是一段新的文本";

}

</script>

2. 创建节点和插入节点

http://www.runoob.com/jsref/dom-obj-all.html

很多时候我们想要在某个位置插入一个新的节点，此时我们首先需要有一个节点存在，可

以通过以下几种方式创建新节点

创建节点

方法描述

createElement() 创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象

createTextNode() 创建一个文本节点，可以传入文本内容

innerHTML 也能达到创建节点的效果，直接添加到指定位置了

插入节点

方法描述

write() 将任意的字符串插入到文档中

appendChild() 向元素中添加新的子节点，作为最后一个子节点

insertBefore() 向指定的已有的节点之前插入新的节点

newItem：要插入的节点

exsitingItem：参考节点

需要参考父节点

function add(){

var container = document.getElementById('container')

var paragraph = document.createElement('p');

var txt = document.createTextNode('hello')

paragraph.appendChild(txt)

container.appendChild(paragraph)

}

</script>

添加“段落、图片、文本框、选项”

<body>

<button onclick="addTxt();">添加文本框</button>

<option value="-1">你心内的一首歌</option>

</select>

<hr />

</body>

//添加 p 节点

function addPara(){

//获取容器

var container =document.getElementById("container");

//创建段落<p></p>

var p =document.createElement('p');

//第一种方式

//创建文本节点

var txt=document.createTextNode("以后的你会感谢现在努力的你");

//将 txt 节点追加到 p 节点中

p.appendChild(txt);

//将 p 节点追加到 container 节点中

container.appendChild(p);

//第二种方式

//向 p 节点中添加内容

p.innerHTML="以后的你会感谢现在努力的你";

//将 p 节点追加到 container 节点中

container.appendChild(p);

//第三种方式

//将字符串类型的 p 标签内容添加到 container 中，不会添加多次

var str = "<p>以后的你会感谢现在努力的你</p>";

container.innerHTML=str;

}

//添加图片

function addImg(){

//创建图片

var img = document.createElement("img") ;

//设置属性第一种方式

//设置 img 标签的 src 属性

//img.src ="http://www.baidu.com/img/bd_logo1.png";

//设置属性第二种方式

//setAttribute() 方法添加指定的属性，并为其赋指定的值。

//设置 img 的 src 属性

img.setAttribute('src','http://www.baidu.com/img/bd_logo1.png');

img.style.width ='300px';

img.style.height ='200px';

//获取容器

var container =document.getElementById("container");

//将 img 节点追加到 container 中。

container.appendChild(img);

}

//添加文本框

function addTxt(){

//创建文本框

var txt =document.createElement("input");

//设置类型第一种方式

txt.type ="text";

txt.value ="添加成功";

//设置类型第二种方式

txt.setAttribute('type', 'text');

txt.setAttribute('value', '添加成功');

* txt.type='password'

* txt.value='123'

//获取容器

var container =document.getElementById("container");

//将 txt 节点追加到 container 中。

container.appendChild(txt);

}

//添加下拉框的选项

function addOptions(){

//第一种方式

//创建下拉项

var option = document.createElement("option") ;

option.value = "2" ;

option.text = "油菜花" ;

//获取下拉框

var sel=document.getElementsByTagName("select")[0];

//添加下拉项

sel.appendChild(option);

//第二种方式:

var option = document.createElement("option") ;

option.value = "2" ;

option.text = "不该" ;

//获取下拉框

var sel=document.getElementsByTagName("select")[0];

//添加下拉项

sel.options.add(option);

//第三种方式: 添加下拉项

var sel=document.getElementsByTagName("select")[0];

sel.innerHTML+="<option value = '2'>英雄</option>" ;

}

</script>

3. 间接查找节点

方法| 属性描述

childNodes () 返回元素的一个子节点的数组

firstChild() 返回元素的第一个子节点

lastChild() 返回元素的最后一个子节点

nextSibling 返回元素的下一个兄弟节点

parentNode 返回元素的父节点

previousSibling 返回元素的上一个兄弟节点

4. 替换节点

方法| 属性描述

replaceChild(newNode,oldNode) 用新的节点替换旧的节点

oldNode.parentNode.replaceChild(newNode,oldNode)

首先通过旧节点定位到父节点，然后用新的节点替换旧节点

5. 克隆节点

方法| 属性描述

cloneNode() 复制节点

var 复制好的节点 = 被复制的节点.cloneNode([true/false]);

true：深度克隆，可以克隆结构和内容

false(默认值)：只克隆结构

<body>

<hr />

<li>green</li>

</ul>

<hr />

</body>

replaceChild(newNode,oldNode)

用新的节点替换旧的节点

newNode：新的节点

oldNode：要被替换掉的节点

格式：

oldNode.parentNode.replaceChild(newNode,oldNode)

首先通过旧节点定位到父节点，然后用新的节点替换

旧节点

cloneNode()

复制节点

var 复制好的节点 = 被复制的节

点.cloneNode([true/false]);

true：深度克隆，可以克隆结构和内容

false(默认值)：只克隆结构

* */

function replaceNode () {

//1.获取旧的节点

var span = document.getElementById("span1");

//2.创建一个新的节点

var div = document.createElement('div');

div.innerHTML = "这是新的节点";

//3.用新节点替换旧节点

span.parentNode.replaceChild(div,span);

}

//复制节点

function copy () {

//1.获取要复制的元素

var ul = document.getElementById("ul1");

//2.复制

var ul2 = ul.cloneNode(true);

//3.将复制好的内容添加到 div 中

document.getElementById("div1").appendChild(ul2);

}

</script>

6. 删除节点

方法| 属性描述

removeChild() 从元素中移除子节点

function delNode(){

var programmer =document.getElementById("programmer");

//从父元素中删除节点，获取要删除对象的父元素，然后从父元素中删除该对象

programmer.parentNode.removeChild(programmer);

}

</script>

<body>

</body>

三、属性操作

在操作 DOM 对象时，除了可以操作对象整体之外，还可以更加灵活地操作对象中的各个

属性。

方法| 属性描述

getAttribute() 返回指定元素的属性值

getAttributeNode() 返回指定属性节点

element.id 设置或者返回元素的 id

setAttribute() 设置或者改变指定属性并指定值

setAttributeNode() 设置或者改变指定属性节点

element.style 设置或返回元素的样式属性

element.className 设置或返回元素的 class 属性

element.classList 返回元素的类名

<body>

性别

<input type="radio" checked="true" name="sex" value="1">男

<input type="radio" name="sex" value="0">女

</body>

var txt =document.getElementById("txt");

var sxtimg =document.getElementById("sxtimg");

var sex =document.getElementsByName("sex")[0];

//获取值

//txt---》加油，胜利就在眼前 --》testsxt --true

alert(txt.id+"-->"+txt.value+"-->"+txt.className+"--

>"+sxtimg.title+"-->"+sex.checked);

//txt.getAttribute("class")// IE 不支持

//txt.getAttribute("className") //IE 支持

var clz

=(txt.getAttribute("class")=='undefined')?txt.getAttribute("className"):txt

.getAttribute("class");

alert(txt.getAttribute("id") +"-->"+txt.getAttribute("value")+"-->"+

clz);

//修改值

txt.className = 'test1';

sxtimg.style.display ='none';

txt.setAttribute("value","success");

txt.setAttribute("aaa","000000"); //自定义属性

alert(txt.getAttribute("aaa")); //获取自定义属性值

//删除属性

txt.removeAttribute("aaa");

alert(txt.getAttribute("aaa"));

</script>

JS 进行的是原始的操作，常常和事件一起结合使用，后期学习 JQuery 可以更方便地操作

DOM

posted @ 2020-01-02 15:58 数据阮小白阅读(259) 评论(0) 编辑收藏举报

刷新页面返回顶部

数据阮小白

#数据阮小白的进阶之路

JS 的事件和 BOM操作

JS — 事件和 BOM

JS中的DOM

一.定义

二、节点

公告

数据阮小白

#数据阮小白的进阶之路

JS 的事件和 BOM操作

JS — 事件和 BOM

JS中的DOM

一.定义

二、 节点

公告

二、节点