JS中DOM操作的一些方法

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.nextElementSiblingtable的第一个子节点的下一个同级
 table.lastElementChild//table的最后一个子节点