【前端之JavaScript DOM 基本操作( 上 )的基本语法知识】

前端之JavaScript DOM 基本操作( 上 )的基本语法知识

我们常见的Web前端三巨头：HTML、CSS、JS（JavaScript）。
具体请移到【我的专栏】当中的前端——>前端之HTML+CSS；
而在这里我将图文并茂的介绍JS在Vscode中相关功能的运用，希望能够对你们有些帮助。

1. 获取元素的方式
2. 操作元素内容
3. 操作元素属性
4. 操作元素类名
5. 操作元素行内样式
6. 获取元素非行内样式
7. 总结

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 基本操作( 上 )的基本语法知识已经写的非常清楚了，具体实战有什么问题的小伙伴可留言或者私信，看到一定帮您解决，我们别的文章再见。