js基础知识 —— DOM

一、DOM的概念

DOM: 文档对象模型，就是操作 html 中标签的一些能力
DOM 的核心就是 document 对象
document 对象是 JS 内置的一个对象, 里边存储着专门用来操作元素的各种方法
DOM: 页面中的标签, 我们通过 JS 获取到以后, 就把这个对象叫做 DOM对象(DOM节点)

二、DOM事件

1.操作属性

*innerHTML获取元素内部的html

  <div id="box">
    <p>
      <span>各位，早上好</span>
    </p>
  </div>
   <script>
        var oDiv = document.querySelector('#box')   //获取div
        console.log(oDiv)
        console.log(oDiv.innerHTML)
        //修改html里面的内容 
        oDiv.innerHTML = '<p><span>大家们，早上好~~~~</span></p>'
   </script>

innerText 获取元素内部的文本

     console.log(oDiv.innerText)
    //修改html里面的内容 
    oDiv.innerText = '<p><span>这个不能识别标签，将标签作为字符串输出</span></p>'

2.获取元素

0.前缀代码

      <div class="box1">我是1</div>
      <div id="box2">我是2</div>
      <div class="box1">33我是3</div>
      <div class="box1">44我是4</div>

1.获取非常规元素

    console.log(document.documentElement)   //获取html
    console.log(document.body)          //获取body
    console.log(document.head)

2.获取常规元素

1.通过ID获取标签

    var box = document.getElementById('box2')
    console.log(box)

2.通过class获取标签

        var box = document.getElementsByClassName('box1')
         console.log(box)    //得到伪数组
         console.log(box[1])  //需要下标来获取数组

3.通过标签名获取

        var box = document.getElementsByTagName('div')
        console.log(box)
        console.log(box[3])

4.按照选择器形式获取标签

4.1 querySelector(获取满足条件的第一条)

        var box = document.querySelector('.box1')
        console.log(box)
        var box = document.querySelector('#box2')
        console.log(box)

4.2 querySelectorAll(获取所有的满足条件)

        var box = document.querySelectorAll('.box1')
        console.log(box)
        var box = document.querySelectorAll('#box2')
        console.log(box)

3.元素属性

    <!-- 行内样式 -->
      <div class="box" style="height: 600px;width:500px; background-color:red" ></div>
    <!-- 内部样式 -->
      <div class="box1 box2"></div>
    //0.获取元素
        var oDiv = document.querySelector('.box')
        var oDiv1 = document.querySelector('.box1')

1.获取元素样式（只能获取行内样式）

    console.log(oDiv.style.width)
    console.log(oDiv.style.height)
    console.log(oDiv.style.backgroundColor) //不能写-,相当于减号，使用点语法用驼峰命名法
    console.log(oDiv.style['background-color']) //中括号语法

2.设置元素样式

    oDiv.style.width = 666 +'px'
    oDiv.style.backgroundColor = 'blue'

3.获取非行内样式 (查询的样式是只读的，不能修改)

   console.log(window.getComputedStyle(oDiv1).width)
   console.log(window.getComputedStyle(oDiv1).backgroundColor)

4.操作元素类名1 className

    oDiv1.className = 'bigBox' //将原有的类名删除，改心的类名为bigBox
    oDiv.className = 'smallBox'

5.操作元素类名2 classList

    // 获取类名
      console.log(oDiv1)
    //新增类名
      oDiv1.classList.add('bix9')
    // 删除类名
      oDiv1.classList.remove('box2')

4.元素属性

var oUl = document.querySelector('ul') //获取元素ul

1.元素节点

    var eleNode = oUl.firstElementChild
    console.log(eleNode)

2.属性节点

     var attrNode = oUl.attributes[0]
     console.log(attrNode)

3.文本节点

    var textNode = oUl.firstChild
    console.log(textNode)

4.获取元素的某些属性 getAttribute

<div class="box" a="123">前缀</div>

    var oDiv = document.querySelector('.box')  //获取元素方法1
    var oDiv = document.getElementsByClassName('box')[0] //获取元素方法2
    
    console.log(oDiv.getAttribute('a'))       //123
    console.log(oDiv.getAttribute('class'))  //box
    console.log(oDiv.getAttribute('b'))  //找不到返回null

5.修改元素的某些属性 setAttribute

    oDiv.setAttribute('a','147')
    oDiv.setAttribute('b','963')
    oDiv.setAttribute('class','bigBox')

6.删除元素的某些属性

    oDiv.removeAttribute('a')
    oDiv.removeAttribute('a')

三、DOM节点

0.前缀代码

    <div>
    <p>你好</p>
    <span>测试文本</span>
    <p>你是谁家的美女</p>
    <h1 class="box" id="big" a="125" num="999">JS是世界上最好学的语言</h1>
  </div>
  <script>
   var oDiv = document.querySelector('div')
  </script>

1.获取子节点

1.获取子一级所有节点 childNodes 拿到是一个伪数组

console.log(oDiv.childNodes)   //7个

2.获取子一级所有元素节点 children 获得的是内部标签（也是一个伪数组）

console.log(oDiv.children)   //3个

3.获取子一级的第一个节点

console.log(oDiv.firstChild)

4.获取子一级的最后一个节点

console.log(oDiv.lastChild)

5.获取子一级的第一个元素节点

console.log(oDiv.firstElementChild)

6.获取子一级的最后一个元素节点 ()

console.log(oDiv.lastElementChild)

2.获取兄弟节点

1.获取下一个兄弟节点

console.log(oDiv.nextSibling)

2.获取上一个兄弟节点

console.log(oDiv.previousSibling)

3.获取下一个兄弟元素节点 (下一个标签)

console.log(oDiv.nextElementSibling)

4.获取上一个兄弟元素节点 (上一个标签)

console.log(oDiv.previousElementSibling)

3.获取父节点

var oH = document.querySelector('h1')

1.获取父节点（获取h1的父元素节点）

 console.log(oH.parentNode)

2.获取元素所有的属性值 (获取h1的所有属性值)

 console.log(oH.attributes)

四、操作DOM

常规意义上 '增删改查'
注:在向页面增加一个节点, 首先, 你应该先有一个节点

1.在 JS 中创建一个节点

语法: document.createElement('要创建的标签名')

2.向页面增加一个节点

语法1: 元素.appendChild(要添加的节点)
- 作用: 向元素的末尾追加一个节点
语法2: 元素.insertBefore(要插入的节点, 插入到那个节点的前面)
- 注意: 两个参数都是必填项
- 第二个参数传递正常节点时, 代表插入到这个节点的前面,第二个参数传递的是 null 时, 表示插入到 "元素" 的末尾

3.删除页面某一个节点

语法1: 父节点.removeChild('要删除的子节点')
语法2: 节点.remove()

4.修改页面的某一个节点

语法: 父节点.replaceChild('新节点', '旧节点/要被修改的节点')
作用: 将页面中的某一个节点做一个替换

5.克隆一个节点 (把一个节点复制出一个一模一样的)

语法: 节点.cloneNode(参数)
参数: 默认是 false, 表示不克隆后代节点
选填是 true, 表示克隆后代节点

注： DOM 节点在页面中只有一个 (核心)

浅识js——DOM