JavaScript DOM

改变输出流

// 改变输出流
document.write('Hello, world!');

查找元素

// 通过ID查找元素
const element = document.getElementById('my-element');

// 通过类名查找元素
const elements = document.getElementsByClassName('my-class');


// 通过标签名查找元素
const elements = document.getElementsByTagName('div');

// 通过CSS选择器查找元素
const elements = document.querySelectorAll('.my-class');//返回NodeList对象

操作元素

改变元素属性

// 设置元素的ID
const element = document.getElementById('my-element');
element.id ='my-new-element';


// 设置元素的类名
const element = document.getElementById('my-element');
element.className = 'new-class';

//添加/移除元素的类名
const element = document.getElementById('my-element');
element.classList.add('new-class');
element.classList.remove('old-class');


// 设置元素的标签名
const element = document.createElement('div');
element.tagName = 'p';

显示/隐藏元素

// 显示元素
const element = document.getElementById('my-element');
element.style.display = 'block';

// 隐藏元素
const element = document.getElementById('my-element');
element.style.display = 'none';

改变元素样式

// 设置元素的宽度
const element = document.getElementById('my-element');
element.style.width = '100px';


// 设置元素的高度
const element = document.getElementById('my-element');
element.style.height = '100px';


// 设置元素的背景颜色
const element = document.getElementById('my-element');
element.style.backgroundColor = 'red';


// 设置元素的字体颜色
const element = document.getElementById('my-element');
element.style.color = 'blue';


// 设置元素的字体大小
const element = document.getElementById('my-element');
element.style.fontSize = '16px';


// 设置元素的字体样式
const element = document.getElementById('my-element');
element.style.fontWeight = 'bold';
element.style.fontStyle = 'italic';
element.style.textDecoration = 'underline';

改变元素内容

// 设置元素的文本内容
const element = document.getElementById('my-element');
element.textContent = 'Hello, world!';


// 设置元素的HTML内容
const element = document.getElementById('my-element');
element.innerHTML = '<p>Hello, <strong>world!</strong></p>';

动态创建元素

// 创建一个新的元素
const newElement = document.createElement('div');
newElement.id ='my-new-element';
newElement.className = 'my-class';
newElement.textContent = 'Hello, world!';


// 将新元素添加到页面中 appendChild
const container = document.getElementById('my-container');
container.appendChild(newElement);

//insertBefore
const container = document.getElementById('my-container');
container.insertBefore(newElement, container.firstChild);

//createTextNode
const container = document.getElementById('my-container');
const text = document.createTextNode('Hello, world!');
container.appendChild(text);

移除元素

// 移除单个元素
const element = document.getElementById('my-element');
element.remove();


// 移除多个元素
const elements = document.querySelectorAll('.my-class');
for (let i = 0; i < elements.length; i++) {
  elements[i].remove();
}

//移除子元素
const parent = document.getElementById('my-parent');
const child = document.getElementById('my-child');
parent.removeChild(child);

替换HTML元素

// 替换HTML元素
const element = document.getElementById('my-element');
element.outerHTML = '<p>New content</p>';

//replaceChild
const parent = document.getElementById('my-parent');
const oldChild = document.getElementById('my-old-child');
const newChild = document.createElement('div');
newChild.id ='my-new-child';
parent.replaceChild(newChild, oldChild);

事件监听

• onclick
• onmouseover
• onmouseout
• onkeydown
• onkeyup
• onkeypress
• onsubmit
• onload

// 监听单个元素的点击事件
const element = document.getElementById('my-element');
element.addEventListener('click', function() {
  console.log('Clicked!');
});


// 监听多个元素的点击事件
const elements = document.querySelectorAll('.my-class');
for (let i = 0; i < elements.length; i++) {
  elements[i].addEventListener('click', function() {
    console.log('Clicked!');
  });
}

事件冒泡与事件捕获

事件传递有两种方式：事件冒泡和事件捕获。

• 事件冒泡：内部元素先触发事件，然后逐级向上传递，直到最外层元素。
• 事件捕获：最外层元素先触发事件，然后逐级向下传递，直到内部元素。

addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

表单操作

// 获取表单元素
const form = document.getElementById('my-form');
const input = form.querySelector('input[type="text"]');
const textarea = form.querySelector('textarea');
const select = form.querySelector('select');


// 获取表单的值
const value = input.value;
const text = textarea.value;
const selectedOption = select.value;


// 设置表单的值
input.value = 'New value';
textarea.value = 'New text';
select.value = 'new-option';

动画效果

// 元素的淡入动画
const element = document.getElementById('my-element');
element.style.opacity = 0;
element.style.transition = 'opacity 0.5s ease-in-out';


setTimeout(function() {
  element.style.opacity = 1;
}, 500);


// 元素的淡出动画
const element = document.getElementById('my-element');
element.style.opacity = 1;
element.style.transition = 'opacity 0.5s ease-in-out';


setTimeout(function() {
  element.style.opacity = 0;
}, 500);

其他

获取元素的位置

// 获取元素的位置
const element = document.getElementById('my-element');
const rect = element.getBoundingClientRect();
console.log(rect.top, rect.left, rect.width, rect.height);

获取元素的尺寸

// 获取元素的尺寸
const element = document.getElementById('my-element');
const size = element.getBoundingClientRect();
console.log(size.width, size.height);

全屏滚动

// 全屏滚动
const element = document.getElementById('my-element');
element.style.overflow = 'hidden';
element.style.height = '100vh';

鼠标滚动事件

// 鼠标滚动事件
const element = document.getElementById('my-element');  
element.addEventListener('wheel', function(event) {
  console.log(event.deltaY);
});

鼠标移动事件

// 鼠标移动事件
const element = document.getElementById('my-element');  
element.addEventListener('mousemove', function(event) {
  console.log(event.clientX, event.clientY);
});

鼠标点击事件

// 鼠标点击事件
const element = document.getElementById('my-element');  
element.addEventListener('click', function(event) {
  console.log('Clicked!');
});

键盘事件

// 键盘事件
const element = document.getElementById('my-element');  
element.addEventListener('keydown', function(event) {
  console.log(event.keyCode);
});

表单验证

// 表单验证
const form = document.getElementById('my-form');
form.addEventListener('submit', function(event) {
  const input = form.querySelector('input[type="text"]');
  if (input.value.trim() === '') {
    event.preventDefault();
    alert('Please enter a value');
  }
});

本地存储

// 本地存储
const key = 'my-key';
const value = 'my-value';

// 存储
localStorage.setItem(key, value);

// 获取
const storedValue = localStorage.getItem(key);

// 删除
localStorage.removeItem(key);

本地存储事件

// 本地存储事件
window.addEventListener('storage', function(event) {
  if (event.key === 'my-key') {
    console.log(event.newValue);
  }
});

本地存储的限制

// 本地存储的限制
// 存储的数据不能超过 5MB
// 存储的数据只能是字符串
// 存储的数据只能是有效的 JSON 格式

---