Javascript---DOM基础

179 阅读2分钟

完整的JavaScript是由ECMAScript(语法)。Browser Objects(DOM、BOM)(特性)组成的。


DOM查找方法(获取元素)

id

语法:

document.getElementById("id")

功能:

返回对拥有指定ID的第一个对象的引用

返回值:

DOM对象

说明:

id为DOM元素上id属性的值

小栗子:

tag

语法:

document.getElementsByTagName("tag")

功能:

返回对所有tag标签引用的集合

返回值:

数组

说明:

tag为要获取的标签名称

小栗子:

获取指定id下的某个标签

JS设置样式

语法:

ele.style.styleName = styleValue

功能:

设置ele元素的CSS样式

说明:

  • ele为要设置样式的DOM对象
  • styleName为要设置的样式名称,不能用-连接
  • styleValue为设置的样式值
  • 属性是减号连接的复合形式时,必须要转换为驼峰形式

DOM属性

innerHTML

获取和设置标签之间的文本和html内容

语法:

ele.  innerHTML

功能:

返回ele元素开始和结束标签之间的HTML

语法:

ele.innerHTML = "html"

功能:

设置ele元素开始和结束标签之间的HTML内容为html

className

重新设置类,替换元素本身的class

语法:
ele.className

功能:

返回ele元素的class属性

语法:
ele.className = "cls"

功能:

设置ele元素的class属性为cls

结果:

也可获取元素的className,如果元素有2个以上的class属性值,那么获取这个元素的className属性时,会将他的class属性值都打印出来

Attribute

获取属性

语法:
ele.getAttribute("attribute")

功能:

获取ele元素的attribute属性

说明:

  • ele是要操作的DOM对象
  • attribute是要获取的html属性(id、type等)

当需要获取的属性为标签自带的属性时,没必要用getAttribute,可以使用'DOM.属性名'

设置属性

语法:
ele.setAttribute("Attribute",value)

功能:

在ele元素上设置属性

说明:

  • ele是要操作的DOM对象
  • Attribute为要设置的属性名称
  • value为设置的attribute属性的值
  • setAttribute方法必须要有两个参数
  • 如果value是字符串,需加引号
  • setAttribute()有兼容性问题

删除属性

语法:
ele.removeAttribute("attribute")

功能:

删除ele上的attribute属性

说明:

  • ele是要操作的dom对象
  • attribute是要删除的属性名称