JavaScript的DOM操作
来源:互联网 发布:数易生日计算法 编辑:程序博客网 时间:2024/05/16 09:53
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
注意:
(1)Object是获取的元素对象,如通过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的取值:(1)none:此元素不会被显示(2)block:此元素将显示为块级元素
6.控制类名
className 属性设置或返回元素的class属性。
语法:
object.className = classname
作用:
(1)获取元素的class属性
(2)为网页内的某个元素指定一个css样式来更改该元素的外观
程序:
<!DOCTYPE HTML><html><head><meta http-equiv="txttent-Type" txttent="text/html; charset=utf-8" /><title>javascript</title><style type="text/css">body{font-size:12px;}#txt{ height:400px; width:600px;border:#333 solid 1px;padding:5px;}p{line-height:18px;text-indent:2em;}</style></head><body> <h2 id="con">JavaScript课程</H2> <div id="txt"> <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5> <p>1. JavaScript入门篇,让不懂JS的你,快速了解JS。</p> <p>2. JavaScript进阶篇,让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p> <p>3. 学完以上两门基础课后,在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p> </div> <form> <!--当点击相应按钮,执行相应操作,为按钮添加相应事件--> <input type="button" value="改变颜色" onClick="changeColor()"> <input type="button" value="改变宽高" onClick="changeSize()"> <input type="button" value="隐藏内容" onClick="hidetext()"> <input type="button" value="显示内容" onClick="showtext()"> <input type="button" value="取消设置" onClick="resettext()"> </form> <script type="text/javascript"> var myh = document.getElementById("con"); var mydiv = document.getElementById("txt");//定义"改变颜色"的函数function changeColor(){ mydiv.style.color="red"; mydiv.style.backgroundColor="#ccc";}//定义"改变宽高"的函数function changeSize(){ mydiv.style.width="200px"; mydiv.style.height="300px";}//定义"隐藏内容"的函数function hidetext(){ mydiv.style.display="none";}//定义"显示内容"的函数function showtext(){ mydiv.style.display="block";}//定义"取消设置"的函数function resettext(){ var mychose = confirm("你确定要取消设置吗"); if(mychose==true){ mydiv.removeAttribute("style"); }} </script></body></html>
- Javascript的DOM操作
- Javascript的DOM操作
- Javascript的DOM操作
- Javascript的DOM操作
- javascript 的 DOM 操作
- JavaScript的DOM操作
- javascript的DOM操作
- DOM特性的JAVASCRIPT操作
- javascript的DOM操作(一)
- javascript的DOM操作(二)
- Javascript对DOM的操作
- JavaScript:对Dom的操作
- DOM的基本操作【JavaScript】
- javascript的DOM操作 优化
- [DOM]javascript DOM操作
- JavaScript的DOM操作(节点操作)
- JavaScript的DOM操作(节点操作)
- jQuery 的dom操作和javascript的dom操作
- android studio 中如何找到R文件。
- JDK动态代理代理与Cglib代理原理探究
- HDOJ 1829 A Bug's Life (并查集)
- 窗体主控件Dock属性设置为Fill后,被工具条盖住了
- Docker 集群Swarm创建和Swarm Web管理
- JavaScript的DOM操作
- oracle数据库备份类型
- linux下VNC配置详解
- 在windows上传一个新的项目到GitHub上
- 直接插入排序升序,降序,去重排序
- Suse启动cron的方法
- 安卓解决ScrollView嵌套ListView显示不全、与ViewPager滑动冲突的3个类
- 详解Unix和Linux操作系统中Cron的用法
- linux core