博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript的DOM操作
阅读量:1887 次
发布时间:2019-04-26

本文共 1133 字,大约阅读时间需要 3 分钟。

DOM操作

1.认识DOM

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素、属性和文本的属性结构(节点树)

HTML代码分解为DOM节点层次图:

 

2.通过ID获取元素

网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人。那么在网页中,我们通过id先找到标签,然后进行操作。

语法: document.getElementById(“id”)

 

3.获取或替换HTML元素的内容

innerHTML属性用于获取或替换HTML元素的内容。

语法:Object.innerHTML

注意:

1Object是获取的元素对象,如通过document.getElementById("ID")获取的元素。

2注意书写,innerHTML区分大小写。

 

 

4.改变HTML样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢?

语法:Object.style.property=new style;

注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。

 

5.显示和隐藏

网页中经常会看到显示和隐藏的效果,可通过display属性来设置。

语法:Object.style.display = value

注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。

value的取值:(1none:此元素不会被显示(2block:此元素将显示为块级元素

 

6.控制类名

className 属性设置或返回元素的class 属性。

语法:

object.className = classname

作用:

1获取元素的class 属性

2为网页内的某个元素指定一个css样式来更改该元素的外观

 

 程序:

javascript

JavaScript课程

JavaScript为网页添加动态效果并实现与用户交互的功能。

1. JavaScript入门篇,让不懂JS的你,快速了解JS。

2. JavaScript进阶篇,让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。

3. 学完以上两门基础课后,在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。

转载地址:http://eowdf.baihongyu.com/

你可能感兴趣的文章
珠联璧合!基于i.MX RT和RT-Thread的物联网云接入方案
查看>>
基于RTT-MicroPython制作自带BGM的新型肺炎晴雨表
查看>>
Arm宣布推出Cortex-M55核心和Ethos-U55 microNPU,瞄准低功耗Edge AI
查看>>
开源项目|RT-Thread 软件包应用作品:小闹钟
查看>>
在 RT-Thread Studio 上使用 RT-Thread Nano
查看>>
开源项目|软件包应用作品:通用物联网系统平台
查看>>
【经验分享】RT-Thread UART设备驱动框架初体验(中断方式接收带\r\n的数据)
查看>>
单片机里面的CPU使用率是什么鬼?
查看>>
推荐一个优质Linux技术公众号-作者都是一线Linux代码贡献者们哦
查看>>
RT-Thread 编程风格指南
查看>>
95后高校电子教师,软硬兼修有趣有料!
查看>>
使用 STM32 通用 Bootloader ,让 OTA 更加 Easy
查看>>
Cache 的基本概念与工作原理
查看>>
装机量超亿台 RISC-V +IoT OS!中科蓝讯与RT-Thread战略合作,共推自主物联网生态发展
查看>>
Android程序员必备!面试一路绿灯Offer拿到手软,Android面试题及解析
查看>>
Android开发知识体系!腾讯+字节+阿里面经真题汇总,成功入职阿里
查看>>
typescript学习(进阶)
查看>>
三天敲一个前后端分离的员工管理系统
查看>>
EL表达式、JSTL标签库、文件上传和下载
查看>>
Cookie、Session
查看>>