原生JS操作dom的方法（下）

一. 操作 DOM 事件

1.element.addEventListener(event, callback)添加监听器

为指定元素添加事件监听器。

示例

let button = document.getElementById('myButton');
button.addEventListener('click', function() {
  alert('Button clicked!');
});

2.element.removeEventListener(event, callback)监听器移除

示例代码

let button = document.getElementById('myButton');
function handleClick() {
  alert('Button clicked!');
}
button.addEventListener('click', handleClick);
// 移除事件监听器
button.removeEventListener('click', handleClick);

 3.element.dispatchEvent(event)手动触发一个事件。

let button = document.getElementById('myButton');
let event = new Event('click');
button.dispatchEvent(event);

二. 获取和设置表单元素的值

1.inputElement.value获取或设置表单元素（如 <input>）的值。

let input = document.getElementById('myInput');
let value = input.value;  // 获取输入框的值
input.value = '新的值';  // 设置输入框的值

2.inputElement.checked获取或设置表单元素（如 <input type="checkbox">）是否被选中

let checkbox = document.getElementById('myCheckbox');
let isChecked = checkbox.checked;  // 获取复选框状态
checkbox.checked = true;  // 设置复选框为选中状态

三.其他操作

1.document.createTextNode(text)创建一个文本节点，可以插入到 DOM 中。

let textNode = document.createTextNode('这是一个文本节点');
let parent = document.getElementById('parentElement');
parent.appendChild(textNode);

2.window.getComputedStyle(element)获取元素的计算样式，可以用来读取通过 CSS 文件、内联样式等方式设置的最终样式。

let element = document.getElementById('myElement');
let style = window.getComputedStyle(element);
console.log(style.backgroundColor);  // 获取背景颜色

3.element.scrollIntoView()将元素滚动到可视区域。

let element = document.getElementById('myElement');
element.scrollIntoView();  // 滚动到页面视口

4.element.focus()使元素获取焦点。

let input = document.getElementById('myInput');
input.focus();  // 设置输入框为焦点