节点操作

# 节点操作

# 案例

/*
* 根据系统不同时间来判断，所有需要用到日期内置对象
* 利用多分支语句来设置不同的图片
* 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
* 需要一个div元素，显示不同问候语，修改元素内容即可
* */

// 1.获取元素
let img = document.querySelector('img')
let div1 = document.querySelector('div')
// 2.获取时间
let date = new Date()
let hour = date.getHours()
// 3.判断小时数改变图片和文字信息
if (hour < 12) {
    img.src = 'img/1.jpg'
    div1.innerHTML = '早上好'
} else if (hour < 18) {
    img.src = 'img/2.jpg'
    div1.innerHTML = '下午好'
} else {
    img.src = 'img/3.jpg'
    div1.innerHTML = '晚上好'
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 4.3表单元素的属性操作

value、checked、selected

// value
let btn = document.querySelector('button')
let input = document.querySelector('input')
btn.onclick = function () {
    input.value = 'hello'
    // btn.disabled = true
    // this指向的是事件函数的调用者
    this.disabled = true
}

// 案例：仿京东显示隐藏密码
let eye = document.querySelector('eye')
let pwd = document.querySelector('pwd')
let flag = 0
eye.onclick = function () {
    if (flag === 0) {
        pwd.type = 'text'
        eye.src = 'img/2.jpg'
        flag = 1
    } else {
        pwd.type = 'password'
        eye.src = 'img/1.jpg'
        flag = 0
    }
}

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

# 4.3.样式操作

let div3 = document.querySelector('div')
div.onclick = function () {
    // 驼峰命名
    // js修改style，产生的是行内央视，css权重高
    this.style.backgroundColor = 'red'
}

// 使用className

// 案例：排他思想
let btns = document.getElementsByTagName('button')
for (let i = 0; i < btns.length; i++) {
  btns[i].onclick = function () {
    for (let i = 0; i < btns.length; i++) {
      this.style.backgroundColor = ''
    }
    this.style.backgroundColor = 'pink'
  }
}

// 案例：百度换肤
let imgs = document.querySelector('.baidu').querySelectorAll('img')
for (let i = 0; i < imgs.length; i++) {
  imgs[i].onclick = function () {
    document.body.style.backgroundImage = `url('${this.src}')`
  }
}

// 案例：表格隔行变色效果
let trs = document.querySelector('tbody').querySelectorAll('tr')
for(let i = 0;i<trs.length;i++){
  trs[i].onmouseover = function (){
    this.className = 'bg'
  }
  trs[i].onmouseout = function (){
    this.className = ''
  }
}

// 案例：表单全选取消全选
let j_cbAll = document.getElementById('j_cbAll')
let j_tbs = document.getElementById('j_tb').getElementsByTagName('input')
j_cbAll.onclick = function (){
  for(let i = 0;i<tbs.length;i++){
    j_tbs[i].checked = this.checked
  }
}
for(let i = 0;i<tbs.length;i++){
  j_tbs[i].onclick = function (){
    let flag = true
    for(let i  = 0;i<j_tbs.length;i++){
      if(!j_tbs[i].checked){
        flag = false
        // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中 剩下无需循环
        break
      }
    }
    j_cbAll.checked = flag
  }
}

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60

# 4.6自定义属性的操作

// 1.获取元素的属性值
let div5 = document.querySelector('div')
// (1)element.属性 内置属性
console.log(div5.id)
// (2)element.getAttribute(属性) 自定义属性
console.log(div5.getAttribute('id'))

// 2.设置属性值
// element.属性 = '值'
div5.id = 'test'
// element.setAttribute('属性','值') 设置属性 针对自定义属性
// element.removeAttribute('属性') 移除属性

// 案例:tab栏
let tab_list = document.querySelector('.tab_list')
let lis = tab_list.querySelectorAll('li')
let items = document.querySelectorAll('.item')
for(let i = 0;i<lis.length;i++){
  lis[i].setAttribute('index',i)
  lis[i].onclick = function (){
    for(let i = 0;i<lis.length;i++){
      lis[i].className = ''
    }
    this.className = 'current'
    let index = this.getAttribute('index')
    for(let i = 0;i<items.length;i++){
      items[i].style.display = 'none'
    }
    items[index].style.display = 'block'
  }
}

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

# 4.7 H5自定义属性

// data-开头
// <div data-index="2"></div>
// 获取自定义属性的方法
console.log(div.dataset.index)
// dataset是一个集合里面存放了所有以data开头的自定义属性

1
2
3
4
5

上次更新: 2024/08/14, 04:14:33

← 操作元素节点操作→