js事件处理
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
JavaScript组成
ECMAScript:JavaScript语法核心。
DOM:文档对象模型(Document Object Model),提供访问和操作网页内容的方法和接口。
BOM:浏览器对象模型(Browser Object Model),提供与浏览器交互的方法和接口。
JavaScript中有五种简单数据类型,也称为基本数据类型,分别是undefined、null、boolean、number和string。另外还有一种复杂数据类型——object对象类型。JavaScript是基于对象的语言,这意味着程序员既可使用系统自定义的对象,也可使用自己创建的对象。
1 文档的结构和遍历
ParaentNode 获取该节点的父节点
ChildNodes 获取该节点的子节点数组
FirstChild 获取该节点的第一个子节点
LastChild 获取该节点的最后一个子节点
NextSibing 获取该节点的下一个兄弟节点
PreviousSibing 获取该节点上的一个兄弟节点
一般地,节点至少拥有nodeType nodeName nodeValue这三个基本属性吗,节点的类型不同,这三个属性的值也不相同NodeType属性类型分别对应1到12的常数值
NodeType 节点的类型
1 元素节点
2 属性节点
3 文本节点 4CDATA节点 5 实体引用名节点 6 实体名称节点 7处理指令节点 8注释节点 9文档节点 10文档类型节点 11 文档片段节点 12 DTD声明节点
window.onload = function(){
var str =
window.document.getElementById("div1");
var node =str.firstChild;
alert(node.nodeValue);
}
111
我是一个p标签
我是第二个p标签
2 作为元素树的文档
firstElementChild 第一个元素节点
lastElementChild 最后一个子元素节点
childElementCount 子节点元素的数量
window.onload =function(){
var node =
document.getElementById("div1")//获取id为div1的元素对象
var node1 = node.firstElementChild;
var node2= stElementChild;
alert(node.childElementCount);//输出2 div1一共有2个子节点(不包括文档)
alert(node1.innerHTML)//输出我是一个p标签
alert(node2.innerHTML)//输出我是二个p标签
alert(node2.previousElementSibling
.innerHTML)//输出我是一个标签
alert(node1.nextElementSibling.inn
erHTML)//我是第二个p标签
}
Alert
111
我是一个p标签
我是第二个p标签
3 javascript操作标准HTML属性
function fun1(){
document.getElementById("img1").src = "img/IMG_7611.PNG";//通过点击图片来改变图片
}
非标准html属性
getAttribute();
setAttribute();
两个方法都不要理会HTML中的保留字,保留字就是参数像那么class,name等
function fun1(){
document.getElementById("img1").setAttribute("src ","img/IMG_7611.PNG")
alert(document.getElementById("img1").getAttribut e("class"))
}