本文共 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
注意:
(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样式来更改该元素的外观
程序:
javascript JavaScript课程
JavaScript为网页添加动态效果并实现与用户交互的功能。
1. JavaScript入门篇,让不懂JS的你,快速了解JS。
2. JavaScript进阶篇,让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。
3. 学完以上两门基础课后,在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。
转载地址:https://codingchaozhang.blog.csdn.net/article/details/77427603 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!