JavasSript常用方法
获取 DOM 节点
1.选择匹配到的第一个元素
语法:
document.querySelector('css选择器')
参数:
包含一个或多个有效的css选择器 字符串 ,查看 更多css选择器。
返回值:
CSS选择器匹配的第一个元素,一个HTML Element对象。
2.选择匹配的多个元素
语法:
document.querySelectorAll('CSS选择器')
参数:
包含一个或多个有效的css选择器 字符串 ,查看 更多css选择器。
返回值:
CSS选择器匹配的 NodeList 对象集合
示例:
const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
console.log(headings[0].textContent);
这将打印出 h1 标签里的文本内容。
总结
1.获取页面中的标签我们最终常用那两种方式?
querySelectorAll()
querySelector()
2.他们两者的区别是什么?
querySelector() 只能选择一个元素,可以直接操作
querySelectorAll() 可以选择多个元素,得到的是伪数组,需要遍历得每一个元素
3.他们两者小括号里面的参数有神马注意事项
里面写css选择
必须是字符串,也就是必须加引号
更新 DOM 节点
1.innerText方法
语法:
对象.innerText = '<strong>这不会变成粗体</strong>'
注意:
- 通过该方法插入的只是字符串(纯文本信息),不能识别 html 标签
2.innerHtml方法(最常用)
语法:
对象.innerHtml = '<strong>这里可以变成粗体</strong>'
该方法可以识别 html 标签,或者可以用于插入 css 样式。
示例:
对象.innerHtml = '
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
'
创建和插入节点
1.创建节点并添加属性
创建节点语法:
Continue reading