JavaScript入门篇--DOM操作
来源:互联网 发布:企业内部网络建设 编辑:程序博客网 时间:2024/06/05 00:41
认识DOM
文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。
先看看下面代码:
将HTML代码分解为DOM节点层次图:
HTML文档可以说由节点构成的集合,三种常见的DOM节点:
1.元素节点:上图中<html>、<body>、<p>
等都是元素节点,即标签。
2.文本节点:向用户展示的内容,如<li>...<li>
中的JavaScript、DOM、CSS
等文本。
3.属性节点:元素属性,如标签的链接属性href=”//www.imooc.com”。
看下面的代码:
<a href="http://www.imooc.com">JavaScript DOM</a>
通过ID获取元素
学过HTML/CSS样式,都知道,网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人都有一个身份证号一样,只要通过省份证号就可以找到相对应的人。那么在网页中,我们通过id先找到标签,然后进行操作。
语法:
document.getElementById("id")
看看下面的代码:
结果:null或[object HTMLParagraphElem ent]
注:获取的元素是一个对象,如想对元素进行操作,我们要通过它的属性或方法。
innerHTML属性
innerHTML属性用于获取或替换HTML元素的内容。
语法:
Object.innerHTML
注意:
1.Object是获取的元素对象,如通过document.getElementById(“ID”)获取对象
2.注意书写,innerHTML区分大小写。
我们通过id=”con”获取
元素,并将元素的内容输出和改变元素内容,代码如下:
结果:
改变HTML样式
HTML DOM允许JavaScript改变HTML元素的样式。如何改变HTML元素的样式呢?
语法:
Object.style.property = new style;
注意: Object是获取的元素对象,如通过document.getElementById(“id”)获取的元素。
基本属性表(property):
注意:该表只是一小部分css样式属性,其它样式可以通过该方法设置和修改。
代码:
改变
元素样式,将颜色改为红色,字号改为20,背景颜色改为蓝:
<p id="pcon">Hello World!</p><script> var mychar = document.getElementById("pcon"); mychar.style.color = "red"; mychar.style.fontSize="20"; mychar.style.backgroundColor ="blue";</script>
显示和隐藏(display属性)
网页中经常会看到显示和隐藏的效果,可通过display属性来设置
语法:
Object.style.display = value
注意: Object是获取的元素对象,如通过document.getElementById(“id”)获取的元素。
value取值:
看看下面代码:
控制类名(className 属性)
className 属性设置或返回元素的class属性。
语法:
object.className = classname
作用:
1.获取元素的class属性
2.为网页内的某个元素指定一个css样式来更改元素的外观
看看下面代码,获得
元素class属性和改变className:
removeAttribute属性
作用:
removeAttribute() 方法删除指定的属性
代码
<script> var hr = document.getElementById("txt"); hr.removeAttribute("style"); </script>
去掉”txt”的样式,恢复原始值
- JavaScript入门篇--DOM操作
- JavaScript入门篇--你也有控制权(DOM操作)
- JavaScript入门学习5 DOM操作1
- JavaScript入门学习5 DOM操作2
- JavaScript入门(七) - DOM操作
- [DOM]javascript DOM操作
- JavaScript DOM入门
- Dojo入门:DOM操作
- javascript 操作 HTML DOM
- JavaScript Dom操作XML
- javascript 操作 HTML DOM
- javascript 操作 HTML DOM
- javascript DOM 操作
- javascript 操作 HTML DOM
- javascript 操作 HTML DOM
- javascript --操作dom
- javascript操作DOM
- javascript DOM操作基础
- 补充:MyMeans类
- 【BZOJ 2823】[AHOI2012]信号塔 随机增量
- Eclipse快捷键大全
- 安装了MathType但Word中公式打不开
- VPN服务嗅探工具ike-scan
- JavaScript入门篇--DOM操作
- Jenkins搭建.NET自动编译测试与发布环境
- python中使用xmltodic处理xml文件,关于其中的列表问题。
- 教你如何编写简单的Java网络爬虫
- linux的相关知识
- 补充:MyModule类
- 使用ListView更新数据一直闪烁的解决办法
- Win下用Pycharm远程连接虚拟机Linux的环境准备
- 关于强制换行的总结