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()
倒计时案例链接,点击访问即可