前端之JavaScript DOM 基本操作( 上 )的基本语法知识
我们常见的Web前端三巨头:HTML、CSS、JS(JavaScript)。
具体请移到【我的专栏】当中的前端——>前端之HTML+CSS;
而在这里我将图文并茂的介绍JS在Vscode中相关功能的运用,希望能够对你们有些帮助。
- 获取元素的方式
- 操作元素内容
- 操作元素属性
- 操作元素类名
- 操作元素行内样式
- 获取元素非行内样式
- 总结
JavaScript DOM 基本操作( 上 )
一整套操作文档流相关内容的属性和方法
操作 元素 修改样式
操作 元素 修改属性
操作 元素 改变位置
操作 元素 添加事件
…
获取元素的方式
【根据 id 名称获取】
语法 : document.getElementById( ‘id名称’ )
document.getElementById( 'container' )
作用 : 获取文档流中 id 名对应的 一个 元素
返回值 : 如果有 id 对应的元素, 就是 这个元素
如果没有 id 对应的元素, 就是 null
【根据元素 类名 获取】
语法:document.getElementsByClassName( ‘元素类名’ )
document.getElementsByClassName( 'box' )
作用 : 获取文档流中 所有 类名对应的元素
返回值 : 必然是一个 伪数组
如果有类名对应的元素, 有多少获取多少
如果没有类名对应的元素, 空的伪数组
【根据元素 标签名 获取】
语法:document.getElementsByClassName( ‘元素类名’ ) document.getElementsByTagName( 'div' )
作用 : 获取文档流中 所有 类名对应的元素
返回值 : 必然是一个 伪数组
如果有类名对应的元素, 有多少获取多少
如果没有类名对应的元素, 空的伪数组
【根据 选择器 获取一个】
语法:document.querySelector( ‘选择器’ )
作用 : 获取文档流中满足选择器规则的 第一个 元素
document.querySelector( 'div' )
document.querySelector( '.box' )
document.querySelector( '#abc' )
返回值 :
如果有选择器对应的元素, 获取到 第一个
如果没有选择器对应的元素, null
【根据 选择器 获取一组】
语法:document.querySelectorAll( ‘选择器’ )
作用 : 获取文档流中 所有 满足选择器规则的元素
返回值 : 必然是一个 伪数组
如果有选择器对应的元素, 有多少获取多少
如果没有选择器对应的元素, 空的伪数组
操作元素内容
var ele = document.querySelector( 'div' )
ele.innerText = '新内容
var ele = document.querySelector( 'div' )
ele.innerHTML = '<span>新内容</span>'
操作元素属性
var box = document.querySelector( 'div' )
var inp = document.querySelector( 'input' )
box.id = 'content'
inp.type = 'checkbox'
注意 : 以上方法一般不用做操作元素 类名 和 样式
var box = document.querySelector( 'div' )
var res = box.getAttribute( 'hello' )
box.setAttribute( 'hello', '新来的' )
box.removeAttribute( 'hello' )
操作元素类名
获取 : 元素.className
设置 : 元素.className = ‘新类名’
var box = document.querySelector( 'div' )
box.className= ‘新内容'
操作元素行内样式
获取 : 元素.style.样式名
设置 : 元素.style.样式名 = ‘样式值’
注意 : 只能获取和设置元素的 行内样式
<div style="width:100px; height:100px; background-color: pink">文本内容</div>
var box = document.querySelector( 'div' )
box.style.width = '200px'
box.style.height = '300px'
box.style.backgroundColor = 'blue'
获取元素非行内样式
获取 : window.getComputedStyle(元素).样式名
注意:可以获取行内样式, 也可以获取非行内样式
<div style="width:100px; height:100px; background-color: pink">文本内容</div>
var box = document.querySelector( 'div' )
window.getComputedStyle(box).width
window.getComputedStyle(box).height
window.getComputedStyle(box).fontSize
总结:
好了,关于前端之JavaScript DOM 基本操作( 上 )的基本语法知识已经写的非常清楚了,具体实战有什么问题的小伙伴可留言或者私信,看到一定帮您解决,我们别的文章再见。