html dom函数,HTML DOM方法

1. addEventListener() 方法

直译为“添加事件监听器”，用于向指定元素添加事件句柄。

语法：

element.addEventListener(event, function, useCapture)

其中 envent 事件名，必填

和 function(触发执行的函数，例如click，也可以直接在此处自定义一个函数执行)，必填

useCapture布尔值 选填，(true - 事件句柄在捕获阶段执行 ；false【为默认值】事件句柄在冒泡阶段执行)

例子：

用户点击后使用 addEventListener() 方法来执行函数。

点我

document.getElementById("myBtn").addEventListener("click", myFunction);

function myFunction()

{

document.getElementById("demo").innerHTML = "Hello World";

}

function为自定义函数 ↓↓↓

button.addEventListener('click', () => {

isLiked = !isLiked

if (isLiked) {

buttonText.innerHTML = '取消'

} else {

buttonText.innerHTML = '点赞'

}

}, false)

2. querySelector() 方法

直译为“询问数据选择器”，返回匹配指定选择器的第一个元素。

(返回所有的元素，使用 querySelectorAll() 方法替代。)

语法：

document.querySelector(CSS selectors)

CSS selectors:

可以是html标签，

可以是自定义的class和id(.class 和 #id),

可以是某个标签下的自定义clsaa和id(如p.classA，h2#idA),

也可以是某个属性的第一个标签(p[target])

但都必须以字符串的形式；

例子：

修改第一段的背景颜色为红色

这是一个 p 与元素。

这也是一个 p 与元素。

点击按钮修改文档中第一个 p 元素的背景颜色。

点我

function myFunction() {

document.querySelector("p").style.backgroundColor = "red";

}