JS中DOM操作的一些方法_1(10万) 请列举javascript当中,dom常用的方法有哪些(一个方法2分)-优快云博客

本文链接：https://blog.youkuaiyun.com/zyynb/article/details/106503710

本文深入讲解了JavaScript中DOM操作的基本方法，包括通过ID、标签名、类名等选择元素，以及如何创建、添加、获取和操作元素。同时，介绍了常用的元素对象属性，如children、parentElement、nextElementSibling等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS中DOM操作的一些方法

常用dom方法
选择器

document.getElementById(“box”); //通过id获取标签
document.getElementById(‘box’).innerHTML;//innerHTML 属性设置或返回指定标签的HTML内容
document.getElementsByTagName(“div”); //根据标签名获取元素
document.getElementsByClassName(‘aa’)；//根据指定类名获取
document.getElementsByName(name); //根据 name 属性获取一组元素节点对象
document.body //可以直接获取body
document.querySelector("#demo");//返回匹配指定选择器的第一个元素
document.querySelectorAll("#app"); //获取所有的#app

需要注意：
getElementById( )适用于需要查找文档中的一个特定的元素，如果没有指定 ID 的元素返回 null，如果存在多个指定 ID 的元素则返回第一个。

其他的方法获取结果可能是多个，所以element后面要加s。

元素对象

document.body.children;//获取 body 元素的子元素集合
document.getElementById(“aa”).parentElement; //获取指定元素的父元素
document.getElementById(“aa”).nextElementSibling ;//返回指定元素的下一个兄弟元素
document.getElementById(“aa”).previousElementSibling;//返回指定元素的前一个兄弟元素

  <div id="b">
        bb
    </div>
    <div class="a">
        aaa
    </div>
    <div id="c">
        ccc
    </div>
    
     <script>
      let a = document.getElementById('a')
        console.log(a.children[0])//子
        console.log(a.parentElement)//父级
        console.log(a.nextElementSibling)//下一个同级
        console.log(a.previousElementSibling)//上一个同级

	 let table = document.createElement('table')//createElement通过指定名称创建一个元素
	 document.body.appendChild(table)//appendChild添加子级
     </script>

createElement() 方法通过指定名称创建一个元素。
appendChild() 方法可向指定节点的末尾添加新的子节点。

classList.add为元素添加class。
firstElementChild属性返回指定元素的第一个子元素。
lastElementChild 属性返回指定元素的最后一个子元素节点，如果没有，则返回 null。
previousElementSibling 属性返回指定元素的前一个兄弟元素。
nextElementSibling 属性返回指定元素之后的下一个兄弟元素。

 
 table.classList.add('aa')//为"aa"添加class
 table.firstElementChild//table的第一个子节点
 table.firstElementChild.previousElementSibling//table的第一个子节点的上一个同级
 table.firstElementChild.nextElementSibling////table的第一个子节点的下一个同级
 table.lastElementChild//table的最后一个子节点