获取dom元素:
1.通过document.Selector()和document.SelecdtorAll()获取:
该方法属于新增方法
document.Selector()的括号内写字符串获取(符合条件的第一个标签)
例如:
标签:document.querySelector('div') 选第一个div标签
类:document.querySelector('.box') 选第一个box
id:document.querySelector('#id') 选第一个id
li:document.querySelector('ul li:first_child') 选ul的第一个li
注:document.querySelector('ul li')为错误写法
document.SelecdtorAll()也是在括号内写字符串获取元素,不过它获取的是所有符合写入的内容的标签,并形成一个类似数组的东西——NodeList,取用方法和数组类似
例如:
获取 ul 的所有的 li :let lis = document.querySelectorAll('ul li')
获取所有类名叫“ah”的标签:let ahs = document.querySelectorAll(".ah")
取用:lis[0] ahs[0]
2.通过getElementBy~~()获取:
该方法后面的~~要替换成ClassName(类名),Id(id),TegName(标签名)
用JS创建,复制,插入,删除HTML元素:
1.创建:
let d1 = document.creatElement('div')
代码如上,但是,该代码只是让你拥有了一个div,你拿在手里但是没有把它放在HTML的文档流里
想要让它显示,还需要使用:插入结点:appendChild(d1)
2.插入:
把d1插入body的尾部:document.body.appendChild(d1)
把d2插入到d1的尾部:d1.appendChild(d2)
注:当d2有内容时,要先给d2填好内容,再将d2插入d1,否则插入无效
3.复制:
let d2 = d1.cloneNode(false)
如上代码:表示只复制d1这个标签,但是不复制d1的子孙
把false改成true后,复制d1及其子孙标签
4.删除:
d1.removeChild(d2)
如上代码:表示删除d1标签的子代d2标签
对HTML元素内容的操作:
两个方法:
1.用d1.innerText(文本内容):不识别标签
d1.innerHTML(文本内容):识别标签
2.通过创建一个文本节点,然后插入标签中:
let text = document.creatTextNode(文本内容)
d1.appendChild(text)
不识别标签
对,HTML一般属性的修改:
以img的src为例:(包括src,url,title)
第一步:获取你要修改的对象: const img = document.querySelector('img')
第二步:找到该对象中你要修改的属性,并重新赋值:img.src="~~~~"
对HTML样式的修改(表单除外):
1.单个样式:
document.body.style.backgroundImage = `url(~~~)`
如上代码,首先找到body,然后找到style里的background-image =>有-,则使用小驼峰命名法:
backgroundImage
2.多个样式:
方法1:直接修改标签的类名:div.className = 'box',但是原本的属性会丢失
方法2:给标签多加几个类名:div.classList.add('box'),
有加就有减,还有取反:
减:div.classList.remove('box')
取反:div.classList.toggle('box')