HTML5 混合APP开发学习笔记（七）——JavaScript HTML DOM操作

最新推荐文章于 2024-08-26 15:28:39 发布

原创最新推荐文章于 2024-08-26 15:28:39 发布 · 381 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

HTML5混合APP 专栏收录该内容

17 篇文章

订阅专栏

本文主要介绍了JavaScript HTML DOM操作，包括DOM的样式编程，如className属性、classList对象、style对象等，还阐述了HTMLCollection与NodeList的区别。同时详细讲解了事件相关内容，如常用事件、内联属性监听事件、DOM属性监听事件、标准的事件监听函数、事件触发过程及Event对象。

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

JavaScript HTML DOM操作

DOM的样式编程

className属性
className属性可以用来读取或设置HTML元素对象的class属性
当将className属性设置为空字符串时，代表移除所有的样式
classList对象
所有浏览器的 childNodes 属性返回的是 NodeList 对象。
大部分浏览器的 querySelectorAll() 返回 NodeList 对象。
每个节点上都有一个classList对象，提供了方法新增、删除、修改节点上的样式类
style对象
style对象包含了与每个CSS样式对应的属性，只是格式略有不同：
对于单个单词的CSS样式，以相同的名字属性来表示（例如，color样式通过style.color表示）
对于两个单词的CSS样式，则是通过去除横杠，将第一个单词加上首字母大写的第二个单词（例如：background-color样式对应style.backgroundColor）
可以方便获取HTML元素对象的style属性所定义的CSS样式值，但它无法获取在外部定义的CSS样式。
HTMLCollection 对象¹
getElementsByTagName() 方法返回 HTMLCollection 对象。
HTMLCollection 对象类似包含 HTML 元素的一个数组。
HTMLCollection 对象的 length 属性定义了集合中元素的数量。
例：

var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection.length;

HTMLCollection 与 NodeList 的区别
HTMLCollection 是 HTML 元素的集合。
只有 NodeList 对象有包含属性节点和文本节点。
NodeList 是一个文档节点的集合。
NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, …) 来获取元素。
NodeList 与 HTMLCollection 都有 length 属性。通常用作遍历操作
HTMLCollection 元素可以通过 name，id 或索引来获取。
相同点，与数组的区别：
均看起来可能是一个数组，但其实不是。
你可以像数组一样，使用索引来获取元素。
均无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。

事件

JavaScript是基于对象(object-based）的语言，基于对象的基本特征，就是采用事件驱动（event drive)。事件是在浏览器中可以被 JavaScript 侦测到的行为，例如用户点击了按钮，移动了手指，都会触发相应的事件

常用事件

鼠标：onmousedown、onmousemove、onmouseup、onclick、ondbclick等
键盘：onkeydown、onkeyup、onkeypress等
触摸：ontouchmove、ontouchend、ontouchstart、ontouchend等
其他一些事件：onfocus、onblur、onresize、onload、onunload等

内联属性监听事件

先定义好函数 <input type=“button” value=“运行JS函数” οnclick="eventTest();"/>
也可以οnclick=“alert(‘hello’)”;

DOM属性监听事件

只能添加一个事件，后添加的会把之前的覆盖掉，只保留最后一个事件

var  	oInput1=document.getElementById("mybutton1");
  		oInput1.onclick=function(){
		nnalert("hello world");
			}

标准的事件监听函数

若为true表示事件监听是在“捕获”阶段中监听，false表示在“冒泡”阶段中监听，该参数为可选项
可以形成一个事件队列，依次执行

element.addEventListener("mouseover", myFunction,true);
element.addEventListener("click", mySecondFunction,false);
element.addEventListener("mouseout", myThirdFunction);