获取dom对象
获取单个dom元素
querySelector只能获取第一个符合要求的标签
如果选择器找不到元素querySelector就会返回null
通过以下代码获取
选择器写法跟css一样
document.querySelector(选择器)
打印不再是console.log()
而是dir
console.dir()
获取多个dom元素
querySelectorAll返回值为一个数组，找不到元素那么也会返回一个空数组
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<script>
//返回值为数组
let num = document.querySelectorAll('li')
for (let index = 0; index < num.length; index++) {
num[index].innerText = `这是标签` + index
}
</script>
输出：
动态修改文本内容
innerText只能修改文本
innerHTML可以修改文本也可以修改标签
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
document.querySelector('li:nth-child(4)').innerText = '不好吗'
document.querySelector('li:nth-child(2)').innerHTML = '<button>你好</button>'
</script>
</body>
输出：
动态修改元素样式
获得标签.style.要修改的属性(注意大小写)='修改的值'
<body>
<div>演示</div>
<script>
let div = document.querySelector('div')
div.style.fontSize = '100px'
</script>
</body>
添加、切换、删除类
以为在js里面写css样式会比较麻烦
所以可以在css文件先写好，再在js里面添加类名即可
<body>
<div>1</div>
<script>
let div = document.querySelector('div')
//添加类
div.classList.add('a1', 'a3')
//移除类
div.classList.remove('a1')
//切换类，如果原来就有这个类名那么它就是移除，否则就是添加类
div.classList.toggle('a2')
</script>
</body>
定时器
setInterval
setInterval(函数，定时 时间)
定时器关闭
clearTimeout(定时器ID)
匿名函数定时器
setInterval(function () {
console.log('你好');
}, 1000)
事件
事件三要素
获取dom元素、事件类型、事件触发后需要做的动作（函数
addEventListener
案例，鼠标单击后触发函数里面的弹窗
btn.addEventListener('click', function () {
alert('滚')
})
获取父节点
子节点.parentNode
案例
点击子元素span隐藏父元素div
通过parentNode找到父元素,给父元素设置隐藏
<body>
<div>
父元素
<span>关闭父元素</span>
</div>
<script>
let span = document.querySelector('span')
span.addEventListener('click', function () {
span.parentNode.style.display = 'none'
})
</script>
</body>
获取子节点
children
获取元素节点
返回一组伪数组
案例
点击父元素隐藏子元素
<script>
//获取父元素ul
let uls = document.querySelectorAll('ul')
//遍历父元素的长度
for (let index = 0; index < uls.length; index++) {
//给每个父元素绑定点击事件
uls[index].addEventListener('click', function () {
//点击后获取this,this就是ul元素
//然后拿ul找到子元素(children这个方式)的长度,遍历它
for (let i = 0; i < this.children.length; i++) {
//ul的每一个子元素都设置隐藏
this.children[i].style.display = 'none'
}
})
}
</script>
兄弟元素获取
上
previousElementSibling
下
nextElementSibling
创建节点/追加
创建一个li
document.createElement
let li = document.createElement('li')
插入标签
父元素.appndChild(需要添加的元素)
appendChild,加到元素后面
ul.appendChild(li)
inserBefore
父元素.inserBefore(要插入的元素,要插入在那个元素的前面)
inserBefore案例
把left li 3剪切到right li b上面
<body>
<ul class="left">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul class="right">
<li>a</li>
<li>b</li>
</ul>
<script>
let right = document.querySelector('.right')
let b = document.querySelector('.right li:nth-child(2)')
let num = document.querySelector('.left li:nth-child(3)')
right.insertBefore(num, b)
</script>
</body>
输出:
补充
createTextNode可以创建文本节点
let text = document.createTextNode = '使用'
append可以连续插入多个标签
div.append(span1, text1, span2, text2)
