JavaScript の DOM操作

最新推荐文章于 2024-10-15 09:57:04 发布

软行

最新推荐文章于 2024-10-15 09:57:04 发布

阅读量665

点赞数 19

分类专栏： JavaScript文章集合文章标签： javascript 前端 css3 html5

本文链接：https://blog.csdn.net/2301_80293400/article/details/139580936

版权

JavaScript文章集合专栏收录该内容

25 篇文章 1 订阅

订阅专栏

DOM

DOM作用

可以操作网页内容

开发网页内容特效和实现用户交互

DOM树

差不多就是用树状图形表示html的结构

DOM对象

使用js从html中获取元素，js得到的是一个对象

document对象

是一个网页最大的对象，整个网页都在document里面

获取DOM对象

根据CSS选择器获取DOM元素

获取匹配的第一个元素

使用 querySelector()

语法：

document.querySelector(‘CSS选择器’) 意思是从document中找第一个符合CSS选择器的元素，也就是返回第一个符合的元素（对象）

获取匹配的所有元素

使用 querySelectorAll()

语法：

document.querySelectorAll(‘CSS选择器’) 意思是从document中找所有符合CSS选择器的元素，返回的是一个对象数组

注意，这里得到的数组，不能进行pop() push()等操作

获取body元素

因为一个页面body有且仅有一个，所以可以直接取到

语法：

document.body 即可

上面这两个可以理解是对象的成员函数？

修改DOM对象的内容

innerText

获取对象的文本内容

语法：

对象.innerText 就是得到了对象的文本内容

对象.innerText = ‘内容’ 这样就可以进行修改

对于修改的内容，不会解析HTML元素

innerHTML

获取对象的HTML内容

语法：

对象.innerHTML 就是得到了对象的HTML内容

对象.innerHTML = ‘内容’ 这样就可以进行修改

对于修改的内容，会解析HTML元素

这两个可以理解是对象的数据成员？

修改DOM对象属性

常见的属性比如：href title src 等

语法：

对象.属性 = 值

修改DOM对象样式属性

通过 style 属性操作CSS

语法：

对象.style.样式属性 = ‘值’ 需要加引号作为字符串，以及要加上单位

比如：

box.style.width = ‘300px’

多组单词的样式属性采取小驼峰命名法

如：

错误写法 box.style.background-color = ‘#6cf’

正确应为 box.style.backgroundColor = ‘#6cf’

注意，使用此方法是修改元素的行内样式，权重比较高

修改DOM对象类名

通过 className 修改对象类名

语法：

对象.className = ‘类名’

注意：使用上述语句进行类名修改会覆盖原先的类名

修改DOM对象类名通过classList （最好的方案）

通过classList修改（追加与删除）对象类名

追加

对象.classList.add(‘类名’)

删除

对象.classList.remove(‘类名’)

切换有就删掉，没有就加上

对象.classList.toggle(‘类名’)

修改表单元素属性

获取表单的内容

使用表单.value

如

let obj=document.querySelector('input')//获取表单元素
let a=obj.value//获取表单里面的值，这时a里面就是表单的值
obj.value='修改'//同时可以进行修改

修改表单的种类

使用表单.type

let obj=document.querySelector('input')//获取表单元素
let a=obj.type//获取表单里面的值，这时a里面就是表单的类型
obj.type='password'//同时可以修改

修改表单的布尔属性

前情提要

表单中的多选框（type为checkbox），单选框（type为radio）有一个布尔属性checked，加上表示被选择，没有则没有被选择

使用表单.checked 可以对此属性进行操作

注意：因为checked为布尔属性，所以取值只能为true或false

如

    let a=document.querySelector('input')
    a.checked=true//修改表单元素checked属性的值，设置选择框为选中状态

其他的表单布尔属性同理

readonly属性，布尔属性，表示只读
disabled属性，布尔属性，表示禁用，会改变表单显示样式

自定义属性

标准属性：元素自带的属性，比如class，title等
自定义属性：我们自己自定义的属性，自己取名字

自定义属性直接加在元素里面就行了

按照标准一律以 data- 开头

DOM获取一律使用 dataset 获取

如

<body>
  <input type="checkbox" data-my="1" data-id="10"><!--加了自定义属性my，id -->
  <script>
    let a=document.querySelector('input')
    console.log(a.dataset)//获取全部自定义属性，是个对象，成员是所有自定义属性
    console.log(a.dataset.my)//获取自定义属性my
  </script>
</body>