javascript对文档对象模型DOM的基本操作学习笔记
来源:互联网 发布:手机网络挣钱 编辑:程序博客网 时间:2024/06/04 08:45
文档对象模型(DOM)提供了一种访问和修改HTML文档内容的方法。DOM是万维网联盟(W3C)定义的一种标准。
学习的重点:如何使用javascript访问和操作DOM。
1、把DOM看作是一棵树
用树形结构表示的简单文档
说明:树结构中的元素也可以被称作结点或结点对象。
2、获取元素
获取元素有两种方式:
1)getElementById()通过ID获取元素。
var getId = document.getElementById(“aimId”);
alert(getId.value);
此处的.value表示是:id为getId的对象的属性值。即可以通过获取id来获取节点对象,并查看其属性值。
注:innerHTML属性的说明。
function changeText()
{
vardoc = document.getElementById("aimId");
alert(doc.innerHTML);//此处的aimId表示一个文本,这里.innerHTML表示doc对象的文本内容
doc.innerHTML="changeText";//此处表示可以通过.innerHTML属性来修改html中的文本内容。将aimId中的原有文本修改为“changeText"
}
2)getElementByTagName()通过标签名获取。以数组或者列表的格式返回指定标签类型的所有元素。
优点是:在获取多个元素时,该方法要优于getElementById()。
例子:getElementByTagName()通过标签名获取,标签指的就是< >内的内容。
function changecolors()
{
vara1=document.getElementByTagName("td");//获取<td>标签
vara1Length=a1.length;//得到td标签的个数
for(vari=0; i<a1Length; i++)
{
a1[i].style.background="#aaabba";//对<td></td>标签的内容设置背景颜色,该方法可以实现对一类元素的操作
}
}
3、HTML集合
1)document.anchors 包含所有<a>元素的组;
2)document.forms 包含文档中所有<form>元素的组;
3)document.images 包含所有<img>元素的组
4)document.links 包含所有具有href属性的<a>元素的组
4、处理节点
例如:一个ID为mydiv的<div>元素和几个作为它孩子的<a>的锚元素。获取第一个元素并将其放入到childone变量中
varchildone=document.getElementById("mydiv").childNodes[0];//注:第一个节点从下标为0的元素开始
5、操作属性
1)查看属性getAttribute()
function showAttributes(e)
{
vare=document.getElementById("aimId");
varelementList="";
for(varelement in e)
{
var attribute=e.getAttribute(element);
elementList=elementList+element+":"+attribute+"\n";
}
alert(elementList);
}
2)设置属性setAttribute()
varseta=document.getElementById("aimId");
alert(seta.getAttribute("href"));//显示id="aimId"处的href
seta.setAttribute("href","要重新设置的字符串");//对目标处进行修改
alert(seta.getAttribute("href"));//显示设置后的属性值
6、创建元素
1)添加文本
a:创建元素
varnewelement=document.createElement("p");
变量newelement中的元素现在有了一个对新元素的引用,为了使元素可见,需要将其添加到文档中。
b:添加节点
document.body.appendChild(newelement);
c:添加文本
newelement.appendChild(document.createTextNode("HelloWorld"));
2)添加元素并设置ID
varnewelement=document.createElement("p");
newelement.setAttribute("id","newelement");//此处设置newelement的id
document.body.appendChild(newelement);
newelement.appendChild(document.createElement("HelloWorld"));
7、删除元素
使用removeChild()可以删除文档中的任意位置的元素。该方法可以放在文档的任何地方,只要是该元素已经存在即可。
varremoveelement=document.getElementById("aimId");
document.body.removeChild(removeelement);//删除id为aimId的节点
- javascript对文档对象模型DOM的基本操作学习笔记
- JavaScript学习笔记(09)之文档对象模型DOM
- JavaScript学习笔记7 之DOM文档对象模型
- Javascript函数----操作DOM文档对象模型
- 学习笔记:HTML DOM(文档对象模型)
- javascript 文档对象模型(DOM)
- javascript文档对象模型(DOM)
- JS文档对象模型(DOM)的基本方法
- DOM(文档对象模型)学习笔记(一)
- DOM(文档对象模型)学习笔记(二)
- javaScript基本文档对象模型
- Javascript中文档对象模型(DOM)的层次结构图
- javascript之DOM文档对象模型编程的引入
- Javascript文档对象模型(DOM)实例分析
- JavaScript 和文档对象模型(DOM)
- JavaScript DOM(文档对象模型)
- JavaScript 和文档对象模型(DOM)
- JavaScript编程:文档对象模型DOM
- Apache 服务器下载、安装、应用
- Java 8: Lambda Expression
- shiro令牌环
- Lightoj1265 Island of Survival 概率题
- HDU 5085/BC 15D Counting problem
- javascript对文档对象模型DOM的基本操作学习笔记
- Javacard DES/AES/RSA/Hash/Sinature算法API使用示例
- 实习菜鸟的成长(一)
- SDWebImage的探索(1)
- VS2013快捷键
- TCP/IP,HTTP,socket,长连接和短连接
- iOS 9出现错误Applications are expected to have a root view controller at the end of application launch
- 市场营销学
- 数据结构学习一 数据结构概述及预备知识