一、常用DOM

关于dom操作，一般都是document开头

二、获取节点

• 使用 getElementById等等返回的都是动态的集合
• 使用 querySelectorAll 等等返回的是静态集合

具体区别：

    <div></div>
    <div></div>
    <div class="" id="gao" name="15115"></div>
    <div></div>
    <script>
        var a = document.getElementById('gao')
        var li =document.getElementsByTagName('div')
        var li2 = document.querySelectorAll('div')
        console.log(li.length,li2.length)// 4 4
        var b= document.createElement('div')
        a.after(b)
        console.log(li.length,li2.length)// 5 4
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13

1.动态

解释：获取的元素集合是动态的，当其被赋值后，其值会跟随dom元素的变化而变化（上面那个例子）

• document.getElementById()#通过id名获取

    <div id="fu"></div>
    <script>
        console.log(document.getElementById('fu'))//获取的是单个
    </script>
1
2
3
4

• document.getElementsByClassName()#通过class名获取

    <div class="name"></div>
    <script>
        console.log(document.getElementsByClassName('name')[0])//获取的是列表
    </script>
1
2
3
4

• document.getElementsByTagName()#通过标签名获取

    <div></div>
    <div class="name" name="kl"></div>
    <div id="fu"></div>
    <script>
        console.log(document.getElementsByTagName('div')[0])//获取的是列表（在这里上面3个div都被获取到了）
    </script>
1
2
3
4
5
6

2.静态

解释：获取的元素集合是静态的，当其被赋值后，其值不会跟随dom元素的变化而变化（上面那个例子）

• document.querySelector('div') #只能一个

    <div class="name"></div>
    <script>
        console.log(document.querySelector('.name'))// 如果有多个class是name，此方法只能获取一个
    </script>
1
2
3
4

• document.querySelectorAll('div') #可以找到全部

    <div></div>
    <div class="name"></div>
    <div id="fu"></div>
    <script>
        console.log(document.querySelectorAll('div')[0])// 获取多个
    </script>
1
2
3
4
5
6

3.关系

• 获取所有孩子：a.children
• 获取父亲：a.parentElement

三、操作节点属性

举例：

• 前提步骤：获取到节点var a = document.getElementById('gao')
• 修改属性：
  • a.className="big"//正常这个属性就叫class但是其与js内置别名冲突，所以为className
  • a.name="sttt"//此处需要设置属性，但是比如style、class这些就无需提前有因为其是内置的
  • a.style="color: red;font-size:54px;"//对于style的操作可以这样写，下面会介绍更常用的操作
  • a.style.color="red"
  • a.style.fontSize="54px"//原本应该是font-size，这样需要去掉“-”，把其后面那个字母大写即可
• 获取属性： a.getAttribute('ok')//有值就返回值；没有值返回null
• 设置属性：a.setAttribute('ok',151551)//添加属性ok内容为151551（比如style、id等属性其已经被设置了无需设置）
• 删除属性：a.removeAttribute('name')//删除属性名为name的属性
• 属性检测：a.hasAttribute('name')//存在该属性返回true；不存在返回flase

补充：

• 对类单独进行控制使用 classList 属性

  let app = document.getElementById('app')
  app.classList.add('houdunwang')//给app增加类名-houdunwang
  node.classList.remove('houdunwang')//给app删除类名-houdunwang
  1
  2
  3

四、节点增减

1.创建节点

内容：document.createElement('div')// 创建一个节点，但是没有挂载在页面里面，下面会说添加节点

2.节点管理

2.1 添加

• a.before(b)//在并列在a节点 前面 添加节点b，b和a为兄弟关系

• a.after(b)//在并列在a节点 后面 添加节点b，b和a为兄弟关系

• a.append(b)//在a节点里面的 尾部 添加节点b，b和a是父子关系

• a.prepend(b)//在a节点里面的 开始 添加节点b，b和a是父子关系

2.2 删除

• b.remove()//删除b节点

五、节点内容

1.添加html内容

解释：a.innerHTML='

11

//添加后a里面内容会被替换掉'

2.添加文本内容

解释：a.innerText='

11

//添加后a里面内容会被替换掉'

注意：里面的html并不会被解析，会以代码形式展示