一、元素的特性 attribute

Attribute分类

  • HTML标准制定的attribute,称之为标准Attribute
  • 自定义的Attribute,称之为非标准Attribute

Attribute操作

  • hasAttribute: 判断是否有该属性
  • getAttribute: 获取属性
  • setAttribute: 设置属性
  • removeAttribute: 移除属性
  • attributes: 所有属性

注意

  • 大小写不敏感
  • getAttribute 获取到的都是字符串
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div id="abc" class="box" title="box" mydata="lalala">box</div>

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

  console.log(boxEl.hasAttribute("title"))
  console.log(boxEl.getAttribute("title"))

  boxEl.setAttribute("id", "cba")
  boxEl.removeAttribute("mydata")

  console.log(boxEl.attributes)
</script>

二、元素的属性 property

标准的attribute在对应的dom对象中都有对应的property。

非标准的attribute没有对应的property。

1
2
3
4
5
6
7
<div id="abc" class="box" mydata="lalala">我是box</div>

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

  console.log(boxEl.id, boxEl.mydata)  // abc undefined
</script>

attribute property区别

  • 元素属性称之为:attribute
  • 对象属性称之为:property
  • 自定义的attribute用**getAttribute,**标准制定的attribute可用property

三、元素的class、style

class使用

动态修改class完成某个功能,使用class

  • className: 字符串形式,可能会覆盖原有类
  • classList: addremovetogglecontains判断有没有存在某个class
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<style>
  .active {
    color: tomato;
    font-weight: 900;
    font-size: 24px;
    padding: 10px;
    background-color: teal;
  }
</style>

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

<script>
  var boxEL = document.querySelector(".box")
  boxEL.onclick = function () {
    boxEL.classList.toggle("active")
  }
</script>

style使用

精准修改某个css属性的值,使用style属性。如果值设置为空字符串,使用css默认样式。

  • style的读取: getComputedStyle(element)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div class="box">我是box</div>

<script>
  var boxEL = document.querySelector(".box")

  var counter = 1
  boxEL.onclick = function () {
	boxEL.style.width = 100 * counter++ + "px"
	// 多样式写法-会覆盖原有style
	boxEL.style.cssText = "font-size: 30px; color: red"
	console.log(getComputedStyle(boxEL).width)
  }
</script>

四、元素的data-属性

标准制定的attribute会有对应的property,而非标准的attribute没有对应的property,除了可以使用getAttribute,还可以使用data-属性

1
2
3
4
5
6
<div class="box" data-age="18"></div>

<script>
  var boxEl = document.querySelector(".box")
  console.log(boxEl.dataset.age)
</script>

五、元素的常见操作

创建元素

  • createElement

插入元素

  • append: 在node末尾插入节点或字符串
  • prepend: 在node开头插入节点或字符串
  • after: 在node前面插入节点或字符串
  • before: 在node后面插入节点或字符串
  • replaceWith: 将node替换为给定的节点或字符串

image-20230620140438155

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div class="box">
  <span>hehehe</span>
  <p>hahahaha</p>
</div>

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

  // 真实创建一个DOM对象
  var h2El = document.createElement("h2")
  h2El.className = "title"
  h2El.classList.add("active")
  h2El.textContent = "我是标题"

  // 插入node末尾
  boxEl.append(h2El)

  // 插入node开头
  boxEl.prepend(h2El)

  // 插入node前面
  boxEl.after(h2El)

  // 插入node后面
  boxEl.before(h2El)

  // 替换node
  boxEl.replaceWith(h2El)
</script>

移除元素

  • remove
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<button class="remove-btn">移除box</button>
<div class="box">
  <h2>我是标题</h2>
  <span>hehehe</span>
  <p>hahahahah</p>
</div>

<script>
  var boxEl = document.querySelector(".box")
  var removeBtnEl = document.querySelector(".remove-btn")

  removeBtnEl.onclick = function () {
    boxEl.remove()
  }
</script>

克隆元素

  • cloneNode: 接受一个参数Boolean类型,true表示深度克隆
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<button class="clone-btn">克隆box</button>
<div class="box">
  <h2>我是标题</h2>
  <span>hehehe</span>
  <p>hahahahah</p>
</div>

<script>
  var boxEl = document.querySelector(".box")
  var cloneBtnEl = document.querySelector(".clone-btn")

  var counter = 0
  cloneBtnEl.onclick = function () {
    var newNode = boxEl.cloneNode(true)
    newNode.children[0].textContent = "我也是标题" + counter++
    boxEl.after(newNode)
  }
</script>

六、元素的大小和位置

获取内容高度,宽度

  • clientWidth: contentWidth + padding(不包含滚动条)
  • clientHeight: contentHeight + padding
  • clientTop: border-top的宽度
  • clientLeft: border-left的宽度

获取完整高度,宽度

  • offsetWidth: 元素完整的宽度
  • offsetHeight: 元素完整的高度
  • offsetLeft: 距离父元素的x
  • offsetTop: 距离父元素的y

获取可滚动的高度,宽度

  • scrollWidth: 整个可滚动的区域宽度
  • scrollHeight: 整个可滚动的区域高度
  • scrollLeft: 滚动部分的宽度
  • scrollTop: 滚动部分的宽度

image-20230620142011119

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<style>
  * {
    margin: 0;
    padding: 0;
  }

  body {
    padding: 100px;
  }

  .box {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    background-color: teal;
    border: 4px solid red;
    overflow: auto;
    margin: 8px;
  }
</style>

<div class="box">
  lalalalalala
  hahahahahaha
  eaeaeaeaeaea
  babababababa
  cacacacacaca
  lalalalalala
  hahahahahaha
  eaeaeaeaeaea
  babababababa
  cacacacacaca
</div>

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

  // 1、获取内容高度,宽度
  console.log(boxEl.clientHeight, boxEl.clientWidth, boxEl.clientLeft, boxEl.clientTop)

  // 2、获取完整高度
  console.log(boxEl.offsetWidth, boxEl.offsetHeight, boxEl.offsetLeft, boxEl.offsetTop)

  //3、获取可滚动的高度
  console.log(boxEl.scrollWidth, boxEl.scrollHeight, boxEl.scrollLeft, boxEl.scrollTop)
</script>

七、window的大小和滚动

window的宽度和高度

  • innerWidth, innerHeight: 获取window窗口的宽度和高度(包括滚动条)
  • outerWidth, outerHeight: 获取window窗口的整个宽度和高度(包括调试工具、工具栏)
  • documentElement.clientWidth, documentElement.clientHeight: 获取html的宽度和高度(不包含滚动条)

window的滚动位置

  • scrollX: X轴滚动的位置(别名pageXOffset)
  • scrollY:Y轴滚动的位置(别名pageYOffset)

滚动方法

  • scrollBy(x, y):将页面滚动至相当于当前的x,y位置
  • scrollTo(pageX, pagexY): 将页面滚动至绝对坐标
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
console.log(window.innerWidth, window.innerHeight)
console.log(window.outerWidth, window.outerHeight)
console.log(document.documentElement.offsetWidth, document.documentElement.offsetHeight)

window.onclick = function () {
  console.log(window.scrollX, window.scrollY)
}

var scrollBtnEl = document.querySelector(".scroll-btn")
  scrollBtnEl.onclick = function () {
  // 1、window.scrollBy(0, 100)
  // 2、window.scrollTo(0, 300)
}