JavaScript 回顾(八)

·  阅读 79
JavaScript 回顾(八)

这是我参与更文挑战的第31天,活动详情查看: 更文挑战

1, DOM 查询

(1) 获取body标签

var body = document.getElementsByTagName('body')[0]
在document中有一个属性body, 保存了body的引入
var body = document.body
// 保存html标签
var html = document.documentElement
// 页面所有元素
var all = document.all
或者
all = document.getElementsByTagName("*")
复制代码

(2) 根据元素的class属性值查询一组元素节点对象

var box = document.getElementsByClassName("box")
​
// 获取页面所有的DIV
var div = document.getElementsByTagName('div')
​
// 获取指定的DIV
通过CSS选择器
var abox = document.querySelector(".box div")
复制代码

注意:兼容性最好的就是: querySelector(), 但是如果查询的选择器有多个,它只返回第一个, 如果想返回多个,可以用:querySelectorAll()

2, DOM增删改查

(1) 添加新的子节点

// 创建广州li元素节点, 需要一个标签名作为参数
var li = document.createElement("li")
// 创建文本节点, 需要一个文本内容作为参数
var text = document.createTextNode(“广州”)
// 文本节点添加到li中,作为子节点
   li.appendChild(text)
var city = document.getELementById('city')
     city.appendChild(li)
复制代码

(2)删除子节点

// 父节点调用
city.removeChild(节点)
复制代码

(3) 替换子节点

// 替换子节点, 父节点调用
city.replaceChild('新节点'"旧节点")
复制代码

(4) 插入子节点

// 在指定的子节点前面插入新的子节点
city.insertBefore(新节点, '旧节点')
复制代码

注意1:可以不获取父元素,直接:

子节点.parentNode.removeChild(子节点)

注意2: 可以通过innerHTML完成增加操作

obj.innerHTML += "<li>广州</li>"
复制代码

3, JS修改样式

(1) 内联样式

语法: 元素.style.样式名 = 样式值

// 获取box
var box = document.getElementById('box')
// 修改box样式
box.style.width = "300px";
// 修改颜色,
box.style.backgroundColor = "yellow"
复制代码

注意: 如果CSS样式名中又 -, 需要将这种样式名修改成驼峰命名法。

我们通过style属性设置的样式都是内联样式,读取的也是内联样式。

(2) 读取当前元素正在显示的样式

box.currentStyle.width
box.currentStyle.backgroundColor
复制代码

注意: currentStyle只有IE能够使用,其他浏览器getComputedStyle()

需要两个参数: 第一个: 要获取样式的元素

第二个: 可以传递一个伪元素,一般为null

返回是一个对象,这个对象封装了当前元素对应的样式,可以通过获取的对象,去读取样式。

getComputedStyle(box1, null).width
复制代码

定义一个函数,用来获取指定元素的当前样式

/*
* obj :要获取样式的元素
* name: 要获取的样式名
*/
function getStyle(obj, name) {
    // 正常浏览器
   return getComputedStyle(obj, null)[name]
    // IE8浏览器
  /// return obj.currentStyle[name]
}
// 最终优化版本
function getStyle(obj, name) {
    if(window.getComputedStyle) {
        return getComputedStyle(obj, null)[name] 
    } else {
        return obj.currentStyle[name]
    }
}
或者
function getStyle(obj, name) {
    return window.getComputedStyle ? getComputedStyle(obj, null)[name] : obj.currentStyle[name]
}
复制代码

总结:通过currentStyle 和 getComputedStyle() 读取的样式都是只读属性,不能修改,如果修改必须通过style属性

4, 其他样式

(1) clientWidth/clientHeight

这两个属性可以获取元素的可见宽度和高度,包括内容区和内边框。 不带px, 且都是只读属性,无法修改

(2) offsetWidth/offsetHeight

可以获取元素的整个宽度和高度,包括内容区,内边框,和边框

(3) offsetParent

可以用来获取当前元素的定位父元素, 会获取到离当前元素最近的开启了定位的祖先元素。

(4) offsetLeft

当前元素相对于其定位父元素的水平偏移量

(5)offsetTop

当前元素现对于其定位父元素的垂直偏移量

(6)scrollWidth/scrollHeight

可以获取整个滚动区域的宽度和高度

(7)scrollLeft/scrollTop

可以获取水平滚动条滚动的距离/垂直滚动条滚动的距离

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>滚动条滚动到底</title>
  <style>
     #info {
       width: 300px;
       height: 500px;
       background-color: indianred;
       overflow: auto;
     }
  </style>
</head>
<body>
  <h3>欢迎大家注册</h3>
  <p id="info">
    你猜猜xxxx省略50000
  </p>
  <input type="checkbox" disabled="disabled" />我已经仔细阅读协议,一定遵守
  <input type="submit" value="注册" disabled="disabled" />
</body>
</html>
<script>
   window.onload = function() {
       /**
       * 当滚动条滚动到低的时候,检查滚动条
       */
       // 获取滚动条
       var info = document.getElementById('info')
       var inputs = document.getElementsByTagName('input')
       window.addEventListener('onscroll', function() {
          console.log('我滚动了')
       } )
       info.onscroll = function() {
         console.log('我是scrollHeight=' + info.scrollHeight)
         console.log('我是scrollTop=' + info.scrollTop)
         console.log('我是clientHeight=' + info.clientHeight)
         if(info.scrollHeight - info.scrollTop === info.clientHeight) {
           inputs[0].disabled = false
           inputs[1].disabled = false
         }
       }
   }
</script>
复制代码
分类:
前端