JavaScript DOM基础

JavaScript的组成

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

1、基本的DOM查找方法

document.getElementById()

语法:document.getElementById("id")

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

返回值:DOM对象

说明:id为DOM元素上id属性的值


document.getElementsByTagName()

语法:document.getElementsByTagName("tag")

功能:返回一个对所有tag标签引用的集合

返回值:数组

说明:tag为要获取的标签名称



2、设置DOM元素的样式

语法:ele.style.styleName=styleValue

功能:设置ele元素的CSS样式

说明:

1、ele为要设置样式的DOM对象

2、styleName为要设置的样式名称

3、styleValue为设置的样式值


3、DOM(innerHTML和className)

说明:

1、掌握innerHTML属性的应用

2、掌握className属性的应用

3、掌握如何在DOM元素上添加删除获取属性

innerHTML

语法:ele.innerHTML

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

语法:ele.innerHTML="html"

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

说明:innerHTML:获取和设置标签之间的文本和html内容

className

语法:ele.className

功能:返回ele元素的class属性

语法:ele.className="cls"

功能:设置ele元素的class属性为cls


4、DOM属性设置与获取

获取属性

语法:ele.getAttribute("attribute")

功能:获取ele元素的attribute属性

说明:

1、ele是要操作的dom对象

2、attribute是要获取的html属性(如id、type)

设置属性

语法:ele.setAttribute(“attribute”,value)

功能:在ele元素上设置属性

说明:

1、ele是要操作的dom对象

2、attribute为要设置的属性名称

3、value为设置的attribute属性的值

删除属性

语法:ele.removeAttribute("attribute")

功能:删除ele上的attribute属性

说明:

1、ele是要操作的dom对象

2、attribute是要删除的属性名称


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • JavaScript--DOM基础 一、DOM查找方法 1.document.getElementById()语法...
    我可能是个假开发阅读 3,411评论 0 5
  • 一、DOM查找方法 1.document.getElementById() 语法:document.getEle...
    沧海一粟谦阅读 1,337评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,375评论 1 45
  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 9,118评论 0 7
  •   尽管 DOM 作为 API 已经非常完善了,但为了实现更过的功能,仍然会有一些标准或专有的扩展。   2008...
    霜天晓阅读 3,290评论 0 0

友情链接更多精彩内容