JavaScript学习——DOM对象
1、DOM操作
Document:整个html文件都称之为一个document文档
Element:所有的标签都是Element元素
Attribute:标签里面的属性
Text:标签中间夹着的内容为text文本
Node:document、element、attribute、text统称为节点node。
2、Document对象
每个载入浏览器的 HTML 文档都会成为 Document 对象
后面两个方法获取之后需要遍历!
另外还有两个方法很重要
创建文本节点:document.createTextNode()
创建元素节点:document.createElement()
3、Element对象
我们所认知的html页面中所有的标签都是element元素
下面的常用属性和方法可用于所有 HTML 元素上:
element.appendChild() |
向元素添加新的子节点,作为最后一个子节点。 |
element.firstChild |
返回元素的首个子节点。 |
element.getAttribute() |
返回元素节点的指定属性值。 |
element.innerHTML |
设置或返回元素的内容。 |
element.insertBefore() |
在指定的已有的子节点之前插入新节点。 |
element.lastChild |
返回元素的最后一个子元素。 |
element.setAttribute() |
把指定属性设置或更改为指定值。 |
element.removeChild() |
从元素中移除子节点。 |
element.replaceChild() |
替换元素中的子节点。 |
4、Attribute对象
我们所认知的html页面中所有标签里面的属性都是attribute
5、DOM练习
在页面中使用列表显示一些城市(成都、西安、大理),我们希望点击一个按钮实现动态添加城市。
1)步骤分析:
第一步:事件(onclick)
第二步:获取ul元素节点
第三步:创建一个城市的文本节点
第四步:创建一个li元素节点
第五步:将文本节点添加到li元素节点中去。
第六步:使用element里面的方法appendChild()来添加子节点
2)具体代码实现:(window.onload设置隐名函数)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态添加城市</title>
<script>
window.onload=function(){
document.getElementById("btn").onclick=function(){
//1.获取ul元素节点
var ulEle=document.getElementById("ul1");
//2.创建一个城市的文本节点
var textNode=document.createTextNode("舟山");//舟山
//3.创建一个li元素节点
var liEle=document.createElement("li"); //<li></li>
//4.将文本节点添加到li元素节点中去
liEle.appendChild(textNode); //<li>舟山</li>
//5.将li添加到ul中
ulEle.appendChild(liEle);
}
}
</script>
</head>
<body>
<input type="button" value="添加新城市" id="btn"/>
<ul id="ul1">
<li>成都</li>
<li>西安</li>
<li>大理</li>
</ul>
</body>
</html>
在谷歌浏览器内运行,点击按钮添加了新城市,效果如下:
最新文章
- jdbc-批量插入、批量删除、批量更新
- linux下shell编写九九乘法表
- 前端学习之touch.js与swiper学习
- C语言(1)
- c++获取系统时间(引用别人的博文)
- Objective-C 编程艺术 (Zen and the Art of the Objective-C Craftsmanship 中文翻译)
- Es6 之箭头函数 初学
- perl lwp 默认的请求头
- fastdfs storage server的设计与实现
- 微信小程序轮播图
- python之路—博客目录
- Inno Setup安装程序单例运行
- win10装回win7。PE下把原来的系统盘格掉,再安装hdd,重启就好了
- nginx调优操作之nginx隐藏其版本号
- ADO.NET TransactionScope使用说明(转载)
- Maven —— scope 元素的值及其含义
- JS enter事件及数据不完整阻止下一步操作
- Mysql数据库 day1
- bootsrtap带表格面板内容居中
- 问渠那得清如许?为有源头活水来。——java面向对象的思想
热门文章
- Ubuntu 16.04或14.04里下安装搜狗输入法(图文详解)(全网最简单)
- 解决有关null闪退及json解析数据中null的问题
- UVa 424 Integer Inquiry 【大数相加】
- HDU 2199 Can you solve this equation?【二分查找】
- Unity 烘焙的2种方式
- Java自定义属性注解
- 多进程Socket_Server
- Pyhton学习——Day29
- C IO programming test code
- [置顶]
 openHAB 体系结构与编程模型 (2) --- Web Application Servlet 源码结构