JS——DOM、DOM事件

最新推荐文章于 2024-11-07 15:57:42 发布

原创最新推荐文章于 2024-11-07 15:57:42 发布 · 239 阅读

6 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

10 篇文章

订阅专栏

本文深入解析了DOM的基本操作，包括查找方法、样式设置、属性管理等，同时详细介绍了DOM事件处理，涵盖事件类型、鼠标事件、键盘事件及事件绑定的最佳实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM

是document objecct model 的缩写，文档对象类型

提供了文档的结构化表述，定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构、样式和内容

1、基本的DOM查找方法

document.getElementById("id") 返回对拥有指定id的第一个对象的引用返回值是DOM对象

document.getElementsByTagName("tag") 返回一个对所有tag标签引用的集合返回值是数组

取特定元素下的标签引用可以用 document.getElementById("id").getElementsByTagName("tag")

2、设置元素样式

ele.style.styleName=styleValue ele为要设置样式的DOM对象。若为数组，需遍历。

styleName不能使用“-”连字符形式 font-size，只能使用驼峰命名形式fontSize。

3、innerHTML(获取和设置一组标签里的内容) 和 className(获取或设置元素的类)

ele.innerHTML 返回ele元素开始和结束标签之间的文本和HTML内容

ele.innerHTML="html" 设置ele元素开始和结束标签之间的HTML内容为html

ele.className 返回ele元素的class属性

ele.className="cls" 设置ele元素的class属性为cls，是重新设置类，替换元素本身的class。如果元素有2个以上的class属性值，那么获取这个元素的className属性值时，会将它的class属性值都打印出来。当元素本身就设置有class属性时，className属性设置的属性值会覆盖元素原有的class属性

4、DOM属性设置、获取与删除

ele.getAttribute("attribute") 获取ele元素的attribute属性。

ele是要操作的dom对象，attribute是要获取的html属性(如：id、type)。自定义的属性用这种方法获取，标签自带的属性可以直接获取，如p标签和input标签：p.align、input.type、input.name等。

ele.setAttribute("attribute",value) 在ele元素上设置属性。如果value是字符串，需加引号

ele是要操作的dom对象，attribute为要设置的属性名称，value为设置的attribute属性的值。

ele.removeAttribute("attribute") 删除ele上的attribute属性

DOM事件

事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。

不建议使用HTML事件，多元素绑定相同事件时效率低，且不建议在HTML中写JavaScript代码。

HTML事件

直接在HTML元素标签内添加事件，执行脚本

<tag 事件="执行脚本" ></tag> 在HTML元素上绑定事件执行脚本也可以是一个函数的调用

在事件触发的函数中，this是对该DOM对象的引用

DOM 0级事件

通过DOM元素获取HTML元素，(获取HTML元素).事件=执行脚本

ele.事件=执行脚本在DOM对象上绑定事件，执行脚本可以是函数的调用，如果调用函数，语法是：ele.事件=函数名，不加括号。

事件类型

鼠标事件

onload: 页面加载时触发 onclick: 鼠标点击时出触发 onmouseover: 鼠标滑过时触发 onmouseout: 鼠标离开时触发

表单中 onfocus: 获得焦点时触发 onblur: 失去焦点时触发 onchange: 域的内容改变时触发

当脚本在body之前时,使用window.onload执行,<script>标签放在<body>标签之前时,取不到相关的元素,将脚本放在window.onload内,页面加载完成后再加载脚本.

onchange一般作用于select或者是checkbox或者是radio.(下拉菜单,单选框,复选框都能触发onchange事件)

var bgcolor=menu.options[menu.selectedIndex].value;

注意:name不能用来接受DOM对象!!!!!!

onsubmit: 表单中的确认按钮被点击时发生 onmousedown: 鼠标按钮在元素上按下时触发

onmousemove: 在鼠标指针移动时发生 onmouseup: 在元素上松开鼠标按钮时触发

onresize: 当调整浏览器窗口的大小时触发 onscroll: 拖动滚动条滚动时触发

onsubmit事件不是加在按钮上,而是表单上.

window.onresize window.onscroll或div.onscroll

键盘事件

onkeydown: 在用户按下一个键盘按键时发生 onkeypress: 在按下键盘按键时发生(只会相应字母与数字符号)

onkeyup: 在键盘按键被松开时发生

keyCode: 返回onkeypress\onkeydown\onkeyup事件触发的键的值的字符代码,或键的代码.

event代表事件的状态,如触发event对象的元素,鼠标的位置及状态等.

//在事件触发的function里,用一个参数接受事件对象
document.onkeydown=function(event){
    console.log(event.keyCode);
}