一文搞定JS中的DOM基础与进阶

文章目录:

1.DOM简介
2.获取元素
        getElementByld()
        getElementsByTagName()
        getElementsByClassName()
        querySelector()和querySelectorAll()
        getElementsByName()
        选择title元素和body元素
3.创建元素
4.插入元素
        appendChild()
        insertBefore()
5.删除元素
6.复制元素
7.替换元素
8.HTML属性操作(对象属性)
        获取HTML属性值
        设置HTML属性值
9.HTML属性操作(对象方法)
        getAttribute()
        setAttribute()
        removeAttribute()
        hasAttribute()
10.CSS属性操作
        获取CSS属性值
        设置单一CSS属性
        设置多个CSS属性
11.DOM遍历
        查找父元素
        查找子元素
        查找兄弟元素
12.innerHTML和innerText

1.DOM简介

节点和元素的概念解析:

1. 每一个元素是一个节点，每一个节点看成一个对象
2. 我们操作元素的时候实际上是把元素看成一个对象，然后对这个对象的属性和方法进行相关的操作
3. 节点是包含元素的
4. 每一个元素是一个节点，这个节点称为元素节点

2.获取元素

2.1获取元素概述

获取元素其实就是，获取元素节点，对于一个页面，我们想要对某个元素进行操作，就必须通过一定的方式来获取该元素，只有获取到了才能对其进行相应的操作。

2.2getElementByld()

getElementByld()：通过id来选择元素
语法：document.getElementById("id名")

例子：

getElementByld()：不可以操作动态的DOM，如下：

2.2getElementsByTagName()

getElementsByTagName():通过标签名来选择元素
语法：document.getElementsByTagName("标签名")

我们可以看到我们并没有按照标准的语法来写这段代码，那么上面的例子是不是可以这么写呢

当然可以但是我们需要知道两者的区别，第一种写法的意思是获取的是id为list的ul元素下的所有li元素(以伪数组的形式)，第二种写法的意思是获取整个HTML页面的所有li元素(以伪数组的形式)

注：伪数组的形式指的是只能使用length和下标的方式，但是对于数组的其他方法是无法使用的

getElementsByTagName()能操作动态创建的DOM，如下：

2.3getElementsByClassName()

getElementsByClassName()：通过class来选择元素
语法：document.getElementsByClassName("类名")

2.4querySelector()和querySelectorAll()

querySelector()和querySelectorAll()：通过选择器的方式来获取所需要的元素
querySelector()：选取满足选择条件的第一个元素
querySelectorAll()：选取满足条件的所有元素
语法：
document.querSelector("选择器“)
document.querySelectorAll("选择器")
选择器的写法和CSS完全一致

2.5getElementsByName()

getElementsByName()：表单元素一般有一个其他元素都没有的name属性，如果想要通过name属性来获取表单元素，我们可以使用getElementsByName()来实现。一般的getElementsByName()只用于表单元素，且只用于单选按钮和复选框