HTML DOM方法

1. addEventListener() 方法

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

语法：

element.addEventListener(event, function, useCapture)

其中 envent 事件名，必填
和 function（触发执行的函数，例如click，也可以直接在此处自定义一个函数执行），必填
useCapture布尔值选填，（true - 事件句柄在捕获阶段执行；false【为默认值】事件句柄在冒泡阶段执行）

例子：

<body>
<p>用户点击后使用 addEventListener() 方法来执行函数。</p>
<button id="myBtn">点我</button>
<p id="demo">
    
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() 
{
 document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>

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]）
但都必须以字符串的形式；

例子：

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

<p>这是一个 p 与元素。</p>
<p>这也是一个 p 与元素。</p>
<p>点击按钮修改文档中第一个 p 元素的背景颜色。</p>
<button onclick="myFunction()">点我</button>
    
<script>
function myFunction() {
    document.querySelector("p").style.backgroundColor = "red";
}
</script>

</body>

HTML DOM方法

1. addEventListener() 方法

2. querySelector() 方法

推荐阅读更多精彩内容