JS基础-DOM操作

香菜香菇
89 阅读4分钟

DOM：文档对象模型（Document Object Model）简称 DOM，将页面所有的内容表示为可修改的对象

BOM：浏览器对象模型（Browser Object Model）简称 BOM，浏览器提供的用于处理文档之外的所有内容的其他对象

<!--我是注释文本-->
<div class="box">我是div的文本</div>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

// 通过 document 拿到html body head元素
var htmlEl = document.documentElement
var htmlBodyEl = document.body
var htmlHeadEl = document.head

DOM关系继承图

image.png

获取导航

  • 节点之间的导航

image.png

// 获取body所有的子节点
console.log(htmlBodyEl.childNodes)
// 获取body第一个子节点
console.log(htmlBodyEl.firstChild)
// 获取body中的注释
console.log(htmlBodyEl.firstChild.nextSibling)
// 获取body的父节点
console.log(htmlBodyEl.parentNode)
  • 元素之间的导航

image.png

// 获取所有元素的导航
var bodyEl = document.body

// 获取body所有的子元素（element）
var childElement = bodyEl.children

// 获取ul元素
var ulEl = bodyEl.nextElementSibling
// 获取li元素
var liEl = ulEl.children

// 获取box元素
var boxEl1 = bodyEl.children[0]
var boxEl2 = bodyEl.firstChild
  • table之间的导航
<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ww</td>
      <td>19</td>
    </tr>
  </tbody>
</table>

<script>
  var tableEl = document.body.firstElementChild
  // 通过table元素拿到后代元素
  console.log(tableEl.tHead,tableEl.tBodies,tableEl.tFoot)
  // <tr> 元素的集合
  console.log(tableEl.rows)
  // 拿到2行的第一个的元素
  console.log(tableEl.rows[1].cells[0])
</script>
  • form之间的导航
<form action="">
  <input type="text" name="account">
  <input type="password" name="password">
</form>


<script>
  // 获取form元素
  var formEl = document.forms[0]

  // 获取form中的子元素
  var inputEl = formEl.elements.account
</script>
  • table导航的练习

image.png

  table {
    border-collapse: collapse;
  }
  td {
    border: 1px solid #999;
    padding: 8px;
  }
  
<table>
  <tr>
    <td>1-1</td>
    <td>2-1</td>
    <td>3-1</td>
  </tr>
  <tr>
    <td>1-2</td>
    <td>2-2</td>
    <td>3-2</td>
  </tr>
  <tr>
    <td>1-3</td>
    <td>2-3</td>
    <td>3-3</td>
  </tr>
</table>

<script>
var tableEl = document.body.firstElementChild

for(var i = 0; i < tableEl.rows.length; i++) {
  var rowEl = tableEl.rows[i]
  var cellEl = rowEl.cells[i]

  cellEl.style.backgroundColor = 'red'
}
</script>

获取元素的方法

image.png

  • (常用) 通过querySelector和querySelectorAll获取元素
<div class="article">
  <p class="word">
    我是文章内容，哈哈哈哈哈哈哈哈哈
  </p>
  <p class="word">
    我是文章内容喜喜喜喜喜喜
  </p>
</div>

<script>
var wordEl = document.querySelector('.word')
// 可迭代对象、类数组对象、节点列表
var wordEls= document.querySelectorAll('.word') // NodeList(2)[p.word, p.word]

for (var i = 0; i < wordEls.length;i++){
  wordEls[i].style.color = 'red'
}

for(var k of wordEls) {
  k.style.color = 'blue'
}
</script>

c

<div class="box">
  <h2>我是标题</h2>
  <div class="message">
    <p>
      我是段落，
      <span class="keyword">我喜欢吃草莓</span>
    </p>
    <p>
      <span class="keyword">我也喜欢</span>
    </p>
  </div>
</div>

<script>
  var spanEl = document.getElementsByClassName('keyword') // HTMLCollection(2）[span.keyword, span.keyword]
  spanEl[0].style.color = 'pink'

  // 修改所有的
  for (var i = 0; i< spanEl.length; i++){
    spanEl[i].style.color = 'blue'
  }
</script>
  • 通过getElementById获取元素
<div class="article">
  <h3 id="title">我是标题</h3>
  <p>
    我是文章内容，哈哈哈哈哈哈哈哈哈
  </p>
</div>

<script>
var h3El = document.getElementById('title')
h3El.style.color = 'pink'
</script>

节点属性

nodeType 属性提供了获取节点类型的方法

image.png

<!--我是注释节点-->
我是普通文本
<div class="box">我是div文本</div>

<script>
var bodyChildNodes = document.body.childNodes
var commentNode = bodyChildNodes[1]
var textNode = bodyChildNodes[2]
var divNode = bodyChildNodes[3]

// nodeType:节点属性(数值型值)
console.log(commentNode.nodeType, textNode.nodeType, divNode.nodeType) // 8 3 1

// nodeName:获取node节点的名字
// tagName：获取元素的标签名词,仅适用于 Element 节点
console.log(commentNode.nodeName, textNode.nodeName,divNode.nodeName) // #comment #text DIV

// data: 针对非元素的节点获取数据
console.log(commentNode.data, textNode.data, divNode.data) // 我是注释节点 我是普通文本 undefined

// innerHtml: 将元素中的 HTML 获取为字符串形式；设置元素中的内容
console.log(divNode.innerHTML) // 对应的html元素也会获取
console.log(divNode.textContent) // 只获取文本内容

textNode.innerHTML = `<h1>替换数据咯</h1>` // 标签会解析
divNode.textContent = '<h4>替换数据咯</h4>' // 标签会当文本插入
</script>

元素的属性

一个元素除了有开始标签、结束标签、内容之外，还有很多的属性（attribute）

  • 所有的attribute访问都支持如下的方法：
  1. elem.hasAttribute(name) — 检查特性是否存在。
  2. elem.getAttribute(name) — 获取这个特性值。
  3. elem.setAttribute(name, value) — 设置这个特性值。
  4. elem.removeAttribute(name) — 移除这个特性。
  5. attributes：attr对象的集合，具有name、value属性
  • JS动态修改class
<div class="box">点击后文字变红</div>

<script>
  var boxEl = document.querySelector('.box')
  // 在CSS中编写好对应的样式，动态的添加class
  var count = 1
  boxEl.onclick = function() {
    boxEl.className = 'active'
    boxEl.style.width = 200 * count + 'px'
    count++
  }
</script>

<style>
.active {
  color: red;
  background: #00abf4;
  font-size: 15px;
}
</style>
  • elem.classList 是一个特殊的对象：
  1. classList.remove(class)：添加/移除类
  2. classList.toggle(class) ：如果类不存在就添加类，存在就移除它
  3. classList.contains(class)：检查给定类，返回 true/false
  4. classList.add (class) ：添加一个类
  • 读取样式：
  1. 对于内联样式，是可以通过style.* 的方式读取到的;
  2. 对于style、css文件中的样式，是读取不到的
<div class="box" style="color: pink;font-size: 14px" data-name = "www">点击后文字变红</div>

<script>
 var boxEl = document.querySelector('.box')
 console.log(getComputedStyle(boxEl).fontSize) // 14px
 
  // 小程序开发中使用
 console.log(boxEl.dataset) // DOMStringMap{name: 'www'}
</script>

创建、插入元素

<div class="box">
  <span>我是span</span>
</div>

<script>
  var boxEl = document.querySelector('.box')

  // 创建一个真实的DOM对象
  var h2El = document.createElement('h2')
  h2El.className ='title active'
  h2El.textContent = '我是追加内容,追加到元素最后面'

// 将元素插入到boxEl元素最后面
boxEl.append(h2El)  // node末尾插入
boxEl.prepend(h2El) // node开头插入
boxEl.before(h2El) // node前面插入
boxEl.after(h2El) // node后面插入
boxEl.replaceWith(h2El) // 将node替换
</script>

image.png

移除、克隆元素

<button class="btn">移除</button>
<button class="clone">克隆</button>
<div class="box">
  <span>我是span</span>
</div>

<script>
  var boxEl = document.querySelector('.box')
  var btnEl = document.querySelector('.btn')
  var cloneEl = document.querySelector('.clone')

  // 删除一个元素
  btnEl.onclick = function() {
    boxEl.remove()
  }
  
  // 克隆一个新的节点,true:深度监听
  cloneEl.onclick = function() {
    var newNode = boxEl.cloneNode(true)
    boxEl.after(newNode)
  }
</script>

案例练习

数字加减

<button class="addbtn">+1</button>
<button class="subbtn">-1</button>
<h2 class="count">0</h2>

<script>
  var addEl = document.querySelector('addbtn')
  var subEl = document.querySelector('subbtn')
  var h2El = document.querySelector('count')

  var counter = 0
  addEl.onclick = function() {
    counter++
    h2El.textContent = counter
  }
  subEl.onclick = function() {
    counter--
    h2El.textContent = counter
  }
</script>

动态创建列表

<ul class="list"></ul>

<script>
    var ulEl = document.querySelector('.list')

    var isFlag = true
    while (isFlag) {
        var message = prompt('请输入：')
        if(!message) {
            isFlag = false
        }else {
            var liEl = document.createElement('li')
            liEl.textContent = message
            ulEl.append(liEl) // 在末尾插入
        }
    }
</script>
avatar
文章
阅读
粉丝