DOM函数笔记

柒沐子

已于 2022-09-25 20:32:32 修改

阅读量321

点赞数

文章标签： html javascript 前端

于 2022-09-24 22:37:38 首次发布

本文链接：https://blog.csdn.net/l18937842167/article/details/127031491

版权

1、修改元素的常用属性

如：href title src 等

语法：对象.属性 = 值

例：

let pic = document = querySelector('img')

// 修改图片路径

pic.src = './img/1.png'

//修改图片标题

pic.title = '这是一个图片'

2.设置/修改元素样式属性

（1）通过元素样式操作CSS

（2）操作类名(className)操作CSS

（3）通过classList操作控制CSS

例：

(1) box.style.color = 'red'

(2) 元素.className = 'active'

(3) classList追加，删除，切换一个类

        <1>元素.classList.add('类名')     // 追加一个类

        <2>元素.classList.remove('类名')       // 删除一个类

        <3>元素.classList.toggle('类名')        // 切换一个类883.

3.设置修改表单元素属性

例：表单.value = '用户名'

表单.type = 'password'

表单属性:

(1) disabled 禁用按钮

(2)checked 复选框是否选中

(3)selected 下拉菜单

4.定时器 setInterval 和 setTimeout

注：函数名字不需要加括号，间隔时间为毫秒，定时器返回的是一个id数字

结构：两种（箭头函数和普通函数）

区别：this指向不同

setInterval(() => { }, 1000);

setInterval(functiion(){},1000);

关闭定时器

let 变量名 = setInterval(函数,间隔时间)

clearInterval(变量名)

5.事件类型

鼠标事件

click【点击】 mouseenter【鼠标经过】 mouseleave【鼠标离开】

焦点事件：

(1) focus 获得焦点

(2) blur 失去焦点

键盘事件

(1) keydown 按下触发

(2) keyup 抬起触发

文本事件

表单输入触发 input 输入事件

例如：xxx.addEventListener('input',function(){})

6.节点操作

(1) 父节点查找 parentNode属性

返回最近一级的父节点，找不到返回null，切记属性后边不加括号()

子元素.parentNode

(2)子节点查找 chldren

获得所有子节点，包含文本节点（空格，换行）注释节点等

仅获得所有元素节点，返回的还是一个伪数组，

父元素.children

(3)查找节点

目标，能够具备根据节点关系查找目标节点的能力

兄弟关系查找

<1>.下一个兄弟节点

nextElementSibling 属性

<2>.上一个兄弟节点

previousElementSibling 属性

(4)创建节点 createElement('标签名')

创建li标签

let li = document.createElement('li')

//追加使用在ul 标签内

ul.appendChild(li)

(5)追加节点

要想在界面看到，还得插入到某个父元素中

插入到父元素的最后一个子元素“

（1）插入到这个父元素的最后

父元素.appendChild(要插入的元素)

（2）插入到父元素中某个子元素的前面

父元素.insertBefore(要插入的元素，在哪个元素前面)

例如：ul.insertBefore(li,ul.children[0])

(6)克隆节点 ul.cloneNode()

参数为空或者false只克隆本身

true 克隆本身及后代节点

let ul = document.querySelector('ul')

// 参数是空或者false 只克隆本身

// true 克隆本身及后代节点

let newUl = ul.cloneNode()

console.log(newUl)

document.body.appendChild(newUl)

(7)删除节点 removeChild(要删除的元素）

通过父元素删除

父元素.removeChild(要删除的元素)

注：如果不存在父子关系删除不成功

删除节点不存在 / 隐藏节点存在如下：所示

<body>
    <button>点击</button>
    <ul>
        <li>删除内容</li>
    </ul>
</body>
<script>
    let btn = document.querySelector('button')
    let ul = document.querySelector('ul')
    btn.addEventListener('click',function(){
        ul.removeChild(ul.children[0])
        ul.children[0].style.display = 'none'
    })
</script>

节点操作案例链接，打开以后请复制到自己编辑器运行

节点操作案例

6.时间对象

(1)时间对象，首先实例化，获取当前时间 let date = new Date()

(2)获取指定时间

let date = new Date('1919-08-18')

(3)时间对象的方法

getFullYear() 获得年份

getMonth() 获得月份

getDate() 获取月份中的每一天

getDay()获得日期

等等............

//注意：此处不做过多举例，使用时直接函数打包使用即可

时间函数代码块

 // 打包时间函数
        function time() {
          let date = new Date()
          let y = date.getFullYear()
          let m = date.getMonth()
          let d = date.getDay()
          let h = date.getHours()
          let minute = date.getMinutes()
          let s = date.getSeconds()
          return y + '年' + m + '月' + d + '日' + h + '时' + minute + '分' + s + '秒'
        }
        time()

倒计时案例链接，点击访问即可

倒计时案例