JS基础操作DOM元素语法

2021-07-31 20:03:13 阅读：104 来源： 互联网

标签：style DOM 元素 JS 语法获取 document 选择器属性

1获取元素

获取非常规标签 html body head
var html=document.documentElement
var body=document.body
var head=document.head

获取常规标签
1、根据ID获取元素 document.getElementById('ID名字')
   如果没有对应的ID元素，就是null
2、根据类名获取元素 document.getElementsByClassName('类名')
   返回伪数组，伪数组内第[n]个才是元素
3、根据标签名 document.getElementsByTagName('标签名')
   返回伪数组，伪数组内第[n]个才是元素
4、根据name属性获取 document.getElementName('name属性')
   返回伪数组，伪数组内第[n]个才是元素
5、根据选择器获取一个元素 document.querySelector('选择器')
   返回第一个选择器元素，如果没有，就返回null
6、根据选择器获取一组元素 document.querySelectorAll('选择器')
   返回一组选择器，如果没有就返回null

2操作元素内容

1、innerText
读：元素.innerText 该元素内的文本内容
写：元素：innerText='值' 覆盖式书写该元素内的文本内容
如果设置html格式的字符串，不会解析出来
2、innerHTML
读：元素.innerHTML 该元素内的所有内容，返回字符串
写：元素.innerHTML='值' 
覆盖式书写该元素内的超文本内容，能解析html标签的内容
3、value
读：表单.value 获取该元素的value值
写：表单元素.value='值' 完全覆盖书写该表单元素的value的值

3 操作元素属性

元素的属性由属性名＝“属性值”组成
属性的分类：
１、原生属性
　如：id class style type .....
　操作原生属性：
　读：元素.属性名
　写：元素.属性="值"
　布尔类型的属性可以直接使用true或false来赋值
2、自定义属性
获取：元素.getAttribute('属性名')
设置自定义属性：元素.setAttribute('属性名'，属性值)
删除自定义属性：元素.removeAttribute('属性名')
3、操作H5自定义属性
在元素身上有一个dataset的成员，类似对象数据类型，存储着以data- 开头的自定义属性
增加：元素.dataset.属性名=属性值
删除：delete 元素.dataset.属性名
修改：元素.dataset.属性名=属性值
查：元素.dataset.属性名

4 操作元素样式　style

１行内样式
获取：元素.style  元素.style.fontSize 元素.style.['font-size']
设置：元素.style.backgroundColor='red'
2 非行内样式
标准浏览器 window.getComputedStyle(元素).样式名
IE低版本 元素.currentStyle.样式名
注意：
带中划线的样式，要用驼峰命名法，或者数组关联语法['font-size']

5 操作元素类名

1 className
获取：元素.className  得到字符串类型
设置：元素.className='新类名' 覆盖式替换
追加：元素.className+= ' 新类名'  '空格新类名'
2  classList
添加：元素.classList.add('新类名') 不会重复添加类名
删除：元素.classList.remove('新类名')
切换：元素.classList.toggle('新类名') 本身有的话就删除，没有该类名就添加

标签：style,DOM,元素,JS,语法,获取,document,选择器,属性
来源： https://blog.csdn.net/xiaodingmao/article/details/119280144

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9