(十一) DOM扩展

最新推荐文章于 2024-07-31 15:18:21 发布

luckybing~

最新推荐文章于 2024-07-31 15:18:21 发布

阅读量154

点赞数

分类专栏： javascript高级程序设计

本文链接：https://blog.csdn.net/Luckyzhoufangbing/article/details/105322364

版权

javascript高级程序设计专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1. 元素遍历

（1）childElementCount：返回子元素（不包括文本节点和注释）的个数

（2）firstElementChild：指向第一个子元素

（3）lastChildElement：指向最后一个子元素

（4）previousElementSibling：指向前一个兄弟元素

（5）nextElementSibling：指向后一个兄弟元素

<body>
  <div class="parent">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
  </div>
  <script>
    var parent = document.getElementsByClassName('parent')[0] // parent 返回一个HTMLCollection 类数组
    console.log(parent.childElementCount) // 4 
    console.log(parent.firstElementChild) // <div class="item1">1</div>
    console.log(parent.lastElementChild) // <div class="item4">4</div>
    var item3 = document.getElementsByClassName('item3')[0]
    console.log(item3.nextElementSibling) // <div class="item4">4</div>
    console.log(item3.previousElementSibling) // <div class="item2">2</div>
  </script>
</body>

2. 操作类名

<body>
  <div id='test' class="parent wrapper box"></div>
  <script>
    var oTest = document.getElementById('test')
    console.log(oTest.classList) // 返回一个DOMTokenList  classList是DOMTokenList的实例
    console.log(oTest.classList.length) // 3 返回类名长度
    // 新增类名 add
    oTest.classList.add('add')
    // 是否存在类名
    const hh = oTest.classList.contains('hh') // false
    const box = oTest.classList.contains('box') // true
    console.log(hh, box)
    // 移除类名
    oTest.classList.remove('add')
    // 切换类名 已存在删除  不存在添加
    oTest.classList.toggle('hh') // 添加
    oTest.classList.toggle('box') // 删除
    console.log(oTest.classList)
  </script>
</body>

3. HTMLDocument的变化

（1）readyState：是判断文档的加载状态

加载完成： complete

加载中：loading

// 刚进入页面时，页面正在加载
console.log(document.readyState) // loading
// 如果加载完成 window.onload 页面加载完成后执行函数
window.onload = function () {
  console.log(document.readyState) // complete
}

4. 页面兼容模式 document.compatMode

标准模式：CSS1Compat

混杂模式：BackCompat

console.log(document.compatMode) // CSS1CompatMode

BackCompat：标准兼容模式关闭。浏览器宽度:document.body.clientWidth；

CSS1Compat：标准兼容模式开启。浏览器宽度:document.documentElement.clientWidth。

5. scrollIntoView()

该方法可以接受一个布尔值作为参数。

如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；

如果为false，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。

如果没有提供该参数，默认为true。

<body>
  <button id='btn'>click</button>
  <div id='wrapper'>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
  <script>
    var oWrapper = document.getElementById('wrapper')
    var oButton = document.getElementById('btn')
    var children = oWrapper.children // 获取子元素
    var ind = 1
    oButton.onclick = function () {
      children[ind].scrollIntoView()
    }
  </script>

6.contains

判断一个元素是否为另一个元素的后代，如果是返回true ，否则返回false

<body>
  <div id="wrapper">
    <div id="content">1</div>
  </div>
  <div id="test">2</div>
  <script>
    var oWrapper = document.getElementById('wrapper')
    var oContent = document.getElementById('content')
    var oTest = document.getElementById('test')
    console.log(oWrapper.contains(oContent)) // true
    console.log(oWrapper.contains(oTest)) // false
  </script>
</body>