当前位置：首页 > news >正文

JS之BOM与DOM操作

news 2025/11/9 7:14:41

文章目录

JS之BOM与DOM操作
- 事件
- - 事件中的名词
  - 事件类型
  - 事件流和事件模型
  - 事件处理程序
  - - HTML内联处理程序
    - DOM0级事件处理程序
    - DOM2级事件处理程序
    - DOM0/2级事件对比
- BOM对象
- - window对象方法
  - - 系统对话框
    - 打开/关闭窗口
    - 时间函数
    - - setTimeout()
      - setInteval()
  - history对象
  - - history对象的方法
- DOM对象
- - 节点
  - 操作元素节点
  - - 获取节点
    - 创建节点
    - 插入节点
    - 间接查找节点
    - 删除节点
- 表单
- - 获取表单
  - 获取表单元素
  - - 获取input元素
    - 获取按钮
    - 获取下拉项
    - 提交表单

JS之BOM与DOM操作

事件

用户或浏览器自身执行的某种动作

事件中的名词

事件源: 谁触发的事件
事件名: 触发了什么事件
事件监听: 谁管这个事情，谁监视？
事件处理: 发生了怎么办

事件类型

鼠标事件、键盘事件、HTML事件

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

onblur：元素失去焦点

onfocus：元素获得焦点

onclick：鼠标点击某个对象

onclick：鼠标点击某个对象

onchange：用户改变域的内容

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

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

onkeyup：某个键盘的键被松开

onkeydown：某个键盘的键被按下

事件流和事件模型

事件流：页面接受事件的顺序
事件冒泡：从内向外传播（小到大）
事件捕获：逐层传递到最内部的元素（大到小）

事件处理顺序：

事件冒泡

1、 <div>
2、 <body>
3、 <html>
4、document

事件捕获

1、document

2、 <html>

3、 <body>

4、 <div>

事件处理程序

以“on”开头，就是响应某个事件的函数

HTML内联处理程序

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

DOM0级事件处理程序

绑定方式：将一个函数赋值给一个事件处理程序属性
唯一性：同一个事件在一个元素上只能绑定一个处理函数（覆盖）
移除方式：将事件属性赋值为 null 即可移除
兼容性：所有浏览器都支持，无兼容性问题

//绑定方式：
//通过id属性获取按按钮对象->给指定元素绑定点击事件
<body><button id="myBtn">按钮</button><script type="text/javascript">var btn =document.getElementById('myBtn');btn.onclick = function(){console.log('you click a button');}</script>
</body>//移除方式：
btn.onclick = null;

若是要将事件处理程序放置在按钮之前，则需要使用window.onload（等待按钮加载再执行函数，否则会找不到按钮id）

<script>// 代码写在按钮之前window.onload = function() {// 等待页面加载完成后，再获取按钮并绑定事件const btn = document.getElementById('myBtn');btn.onclick = function() {console.log('按钮被点击了');};};
</script><!-- 按钮在代码之后 -->
<button id="myBtn">点击我</button>

DOM2级事件处理程序

是 DOM 标准的扩展，提供了更灵活的事件处理机制，支持事件监听和事件冒泡 / 捕获的控制

可以为同一个元素同一个事件，设定多个事件程序（例如当我点击，我要打印两句话，用两个函数实现）

绑定方式：通过 addEventListener() 方法绑定事件
多事件绑定：同一个事件可以绑定多个处理函数，触发时按绑定顺序执行
移除方式：通过 removeEventListener() 移除，需传入与绑定完全一致的参数（包括函数引用匿名函数无法移除和布尔值）

//事件绑定
element.addEventListener(eventType, handler, useCapture);
/*eventType：事件类型（如 'click'，不带 on 前缀）。
handler：事件处理函数。
useCapture：布尔值，true 表示在捕获阶段触发，false（默认）表示在冒泡阶段触发*/
const btn = document.querySelector('button');
function handleClick() {console.log('DOM2 事件触发');
}
btn.addEventListener('click', handleClick, false); // 冒泡阶段触发//多事件绑定
btn.addEventListener('click', () => console.log('函数1'));
btn.addEventListener('click', () => console.log('函数2'));
// 点击后会依次输出：函数1、函数2//事件移除
btn.removeEventListener('click', handleClick, false); // 移除指定事件

DOM0/2级事件对比

特性	DOM0 级事件	DOM2 级事件
绑定方式	元素。事件属性 = 函数	addEventListener()
多事件绑定	不支持（覆盖）	支持（按顺序执行）
事件阶段控制	不支持（仅冒泡阶段）	支持（捕获 / 冒泡阶段）
移除方式	元素.事件属性 = null	removeEventListener()
兼容性	所有浏览器支持	IE8 及以下需用 attachEvent ()

BOM对象

BOM的核心对象就是window，表示浏览器的一个实例

window对象方法

可以使用window.方法直接调用

系统对话框

弹出框会阻止后续代码的执行，只有关闭/确认后，后续代码才会执行

//（1）消息框:alert 常用alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
//（2）输入框:prompt，返回提示框中的值prompt() 方法用于显示可提示用户进行输入的对话框。参数（可选）：第一个参数：要在对话框中显示的纯文本第二个参数：默认的输入文本
//（3）确认框:confirm，返回 true/false.confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。

打开/关闭窗口

//window.open()打开窗口
<script type="text/javascript">function openBaidu(){window.open('http://www.baidu.com','_self');// _self、_blank等// window.open(); //空白窗口}
</script>
<input type="button" name="open" value="百度" onclick='openBaidu();' />//window.close()：关闭窗口
<input type="button" value="关闭窗口" onclick="window.close();" />

时间函数

setTimeout()

setTimeout() : 在指定的毫秒数后调用函数或计算表达式，返回一个唯一的标识id；

可以通过返回的标识cliearTimeout(id)：来清除指定函数的执行

//在times毫秒后执行function指定的方法，执行之前也可以取消
var id = setTimeout(function,times);clearTimeout(id);

setInteval()

可按照指定的周期（以毫秒计）来调用函数或计算表达式，也可根据返回的标识用来结束；

该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭

var id = setInterval(function,times);clearInterval(id);
// window是一个全局对象，通过全局对象调用setInterval()函数
window.setInterval(test,1000);

history对象

用户（在浏览器窗口中）访问过的URL。history 对象是 window 对象的一部分，可通过window.history 对其进行访问

history对象的方法

back()：页面回退
forward()：下一个页面，加载历史列表中的下一个 URL。当页面第一次访问时，还没有下一个url。
go(number|URL): 页面跳转，URL 参数：要访问的 URL； number参数：要访问的 URL 在 History 的 URL 列表中的相对位置go(-1)，到上一个页面

<body><a href="013-history-a.html">013-history-a.html</a><h1>我是第一个页面</h1><input type="button" value="前进" onclick="window.history.forward();" /><script>console.log(window.history);</script>
</body><body><a href="013-history-b.html">013-history-b.html</a><h1>我是A页面</h1><input type="button" value="后退" onclick="window.history.back();"/>
</body><body><h1>我是B页面</h1><input type="button" value="第一个页面" onclick="window.history.go(-2);"/><input type="button" value="后退" onclick="window.history.back();"/>
</body>

DOM对象

DOM：Document Object Model 文档对象模型，每个载入浏览器的 HTML 文档就是一个 Document 对象

节点

节点类型	节点名称（nodeName）	节点值（nodeValue）	常量（nodeType）	描述 / 示例
文档节点	`#document`	`null`	9	整个文档的根节点（`document` 对象）
元素节点	标签名（如 `div`、`p`）	`null`	1	HTML 标签（如 `<div>...</div>`）
属性节点	属性名（如 `class`、`id`）	属性值（如 `container`）	2	元素的属性（如 `<div class="box">` 中的 `class`）
文本节点	`#text`	文本内容（如 `Hello`）	3	元素内的文本内容（如 `<p>文本</p>` 中的 “文本”）
注释节点	`#comment`	注释内容（如 `这是注释`）	8	HTML 注释（`<!-- 注释内容 -->`）

操作元素节点

获取节点

操作 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="text" name="txt" /><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)”：伪协议，表示不执行跳转，==而执行指定的点击事件

创建节点

方法	描述
createElement()	创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象
createTextNode()	创建一个文本节点，可以传入文本内容
innerHTML	也能达到创建节点的效果，直接添加到指定位置了

插入节点

方法	描述
write()	将任意的字符串插入到文档中
appendChild()	向元素中添加新的子节点，作为最后一个子节点
insertBefore()	向指定的已有的节点之前插入新的节点newItem: 要插入的节点existingItem: 参考节点需要参考父节点

间接查找节点

方法/属性	描述
childNodes	返回元素的一个子节点的数组
firstChild	返回元素的第一个子节点
lastChild	返回元素的最后一个子节点
nextSibling	返回元素的下一个兄弟节点
parentNode	返回元素的父节点
previousSibling	返回元素的上一个兄弟节点

删除节点

方法 / 属性	描述
removeChild()	从父节点中移除指定的子节点，返回被移除的节点

表单

表单是我们页面向后台传输数据的一种非常常见的方式，在进行数据发送（请求发出）之前，我们应该现在页面进行一系列数据合法性的验证，节省不必要的错误数据的传输，以及提高用户的体验度

获取表单

document.表单名称
document.getElementById(表单 id);
document.forms[表单名称]
document.forms[索引]; //从 0 开始

<body><form id='myform' name="myform" action="" method="post"></form><form id='myform2' name="myform2" action="" method="post"></form>
</body>
<script>//四种方式var form =document.getElementById("myform");form =document.myform;form =document.forms["myform"];form =document.forms[0];console.log(form);
</script>

获取表单元素

获取input元素

1)、通过 id 获取：document.getElementById(元素 id);
2)、通过 form.名称形式获取: myform.元素名称; name属性值
3)、通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始
4)、通过 tagName 数组:document.getElementsByTagName(‘input’)[索引] //从0开始

<body><form id="myform" name="myform" action="" method="get">姓名:<input type="text" id="uname" name="uname" value="zs"/><br />密码:<input type="password" id="upwd" name="upwd" value="1234"/><br /><input type="hidden" id="uno" name="uno" value="隐藏域" />个人说明:<textarea name="intro"></textarea><button type="button" onclick="getTxt();">获取元素内容</button></form>
</body>
<script>function getTxt() {var uno = document.getElementById("uno");var uname = myform.uname;console.log(uname + "--------");var upwd = document.getElementsByTagName('input')[1];var intro = document.getElementsByName("intro")[0];console.log(uno.value + ", " + uname.value + ", " + upwd.value + ", " + intro.value);}
</script>

获取按钮

//(1)获取单选按钮组document.getElementsByName("name属性值");//遍历每个单选按钮，并查看单选按钮元素的checked属性	选中状态：	checked='checked'  checked   cheked=true未选中状态：	未设置checked属性 或checked=false<form action="" name="myform"><input type="text" name="inputName" value="aaa" /><input type="radio" name="rad" value="1" />1<input type="radio" name="rad" value="2" />2
</form><script type="text/javascript">var radios = document.getElementsByName('rad');//radios[0].checked = 'checked'for (var i = 0; i < radios.length; i++) {console.log(radios[i].checked + '---' + radios[i].value)}
</script>//（2）获取多选按钮
var ufav = document.getElementsByName("ufav");
var favstr = "";
for (i = 0; i < ufav.length; i++) {if (ufav[i].checked) {favstr += ufav[i].value + ",";}
}
favstr = favstr.substr(0, favstr.length - 1);

多选注意是+=

获取下拉项

操作步骤	代码示例	说明
获取 select 对象	`var ufrom = document.getElementById("ufrom");`	通过`getElementById`方法获取`<select>`元素的 DOM 对象
获取选中项的索引	`var idx = ufrom.selectedIndex;`	`selectedIndex`属性用于获取下拉框中选中项的索引（从 0 开始）
获取选中项的 value 属性值	`var val = ufrom.options[idx].value;`	先通过`options`集合结合索引`idx`找到选中的`<option>`，再通过`value`属性获取其值；若`<option>`无`value`属性，则取标签内的文本内容
获取选中项的文本	`var txt = ufrom.options[idx].text;`	通过`text`属性获取选中`<option>`标签内的文本内容

选中状态可通过selected='selected'、selected=true或selected来设置，未选中状态则不设置selected属性

<body onload="init()"><form id="myform" name="myform" action="" method="">来自：<select id="ufrom" name="ufrom"><option value="-1">请选择</option><option value="0" selected="selected">北京</option><option value="1">上海</option></select><br /><button type="button" id="sub" name="sub">提交</button></form>
</body>
<script>function init() {var sub = document.getElementById("sub");sub.onclick = function() {// 获取select对象var ufrom = document.getElementById("ufrom");console.log("表单对象：" + ufrom);// 获取选中的索引var idx = ufrom.selectedIndex;console.log("选中项的索引值：" + idx);// 获取选中项的value值var val = ufrom.options[idx].value;console.log("选中项的value属性值：" + val);// 获取选中项的textvar txt = ufrom.options[idx].text;console.log("选中项的text：" + txt);}}
</script>

提交表单

（1）使用普通button按钮+onclick事件+事件中编写代码:
- 获取表单.submit();
（2）使用submit按钮 + οnclick=“return 函数()” +函数编写代码:
- 最后必须返回：return true|false;
（3）使用submit按钮/图片提交按钮 + 表单οnsubmit=“return 函数();” +函数编写代码:
- 最后必须返回：return true|false;

查看全文

http://www.dtcms.com/a/585269.html