dom操作

代码怎么写！

已于 2024-01-31 11:30:22 修改

阅读量352

点赞数 4

文章标签：前端 javascript html

于 2024-01-22 14:09:17 首次发布

本文链接：https://blog.csdn.net/m0_56695398/article/details/135655250

版权

本文详细介绍了如何使用JavaScript进行DOM操作，包括通过不同方式选择元素、修改元素内容和属性、添加和删除元素，以及处理0级和2级DOM事件。

摘要由CSDN通过智能技术生成

通过JavaScript可以操作DOM（文档对象模型），改变网页内容、属性和结构。常见的DOM操作包括获取元素、修改元素内容和属性、添加和删除元素等。

一、选择元素

通过ID选择元素： document.getElementById('elementId')

通过类名选择元素： document.getElementsByClassName('className')

通过标签名选择元素： document.getElementsByTagName('tagName')

通过CSS选择器选择元素： document.querySelector('selector') 或 document.querySelectorAll('selector')

document.querySelectorAll('selector')方法返回的是一个类似数组的对象，可以将这个对象转为真正的数组：Array.from(document.querySelectorAll('selector')）

二、操作元素

获取或设置元素的文本内容： element.textContent

获取或设置元素的HTML内容： element.innerHTML

获取或设置元素的属性： element.getAttribute('attributeName') 和 element.setAttribute('attributeName', 'value')

<body>
  <ul class='options'>
      <li data-type="0" style='background-color: #25bb9b;'>tab1</li>
      <li data-type="1">tab2</li>
      <li data-type="2">tab3</li>
      <li data-type="3">tab4</li>
  </ul>
  <ul class='items'>
      <li style="display: block;">content1</li>
      <li>content2</li>
      <li>content3</li>
      <li>content4</li>
  </ul>

  <script>
      var options = document.querySelector('.options');
      var optionItems = [].slice.call(document.querySelectorAll('.options li'));
      var items = [].slice.call(document.querySelectorAll('.items li'));
      options.onclick = function(e) {
         optionItems.forEach((it,index) => {
            it.style.backgroundColor = '#fff';
            items[index].style.display = 'none'
            if(e.target.getAttribute('data-type') == index) {
                 it.style.backgroundColor = '#25bb9b';
                 items[index].style.display = 'block'
            }
         })
      }
  </script>
</body>

添加或移除CSS类名： element.classList.add('className') 和 element.classList.remove('className')

三、创建和添加元素

创建新元素： document.createElement('tagName')

将新元素添加到父元素中： parentElement.appendChild(newElement)

四、常用事件

1.dom0级

表单：onchange、oninput、onfocus、onblur

例：当id为"input"的输入框值发生改变时触发id为"span"的标签内容同步改变

<input id="input" type="text" />
<span id="span"></span>

let domInput = document.querySelector("#input")
let domSpan = document.querySelector("#span")
domInput.onchange = ((e) => {
    domSpan.innerHTML = domInput.value
})

鼠标：onclick、ondblclick、onmouseover、onmouseout、onmousedown、onmouseup

键盘：onkeydown、onkeypress、onkeyup

复制粘贴剪切：oncopy、onpaste、oncut

2.dom2级

添加事件： addEventListener

删除事件： removeEventListener

第三个参数默认false(冒泡)，内部元素的事件会先被触发(p)，然后再触发外部元素(div)；为true(捕获)，外部元素的事件会先被触发，然后才会触发内部元素的事件
<div>
  <p></p>
</div>
element.addEventListener(event, function(){}, false);