JavaScript中的document:
在html页面加载时,浏览器会为每一个标签创造一个对象,可以通过dom操作获得这个对象,多级标签只要多进行几次dom操作,就可以访问到对象
JavaScript中有个一个DOM操作,DOM是个英文缩写
DOM的英文全称是Document Object Model,文档对象模型
像如下的代码,通过docunment.getElementById,就是一个DOM操作
通过docunment获得html中的一个对象,就可以说是DOM操作
同理,你也可以通过类似的手法修改元素的css,例如使用如下代码,
可以把目标元素的背景颜色修改成绿色
document.getElementById("").innerHTML = "";
document.getElementById("").style.backgroundColor = "green";
JavaScript中的事件:
以下为一些常用的JavaScript事件,
在需要设置动作的html元素中设置如下属性,
在 " " 设置自定义的JavaScript函数即可,
以下讲解触发条件
//页面加载时触发
onload=""
//鼠标离开时触发
onmouseout=""
//鼠标经过时触发
onmouseover=""
//文本内容改变时触发(不是实时触发,只在输入完毕触发)
onchange=""
//文本内容选中时触发
onselect=""
//目标元素选中触发
onfocus=""
JavaScript中的句柄使用:
首先句柄的作用是什么?句柄可以用来给元素添加和移除事件,原本利用元素添加例如onclick属性来设置事件的触发,但是这种方法有一种弊端,就是同一个元素同时只能设置一个事件,如果设置新的事件,就会覆盖原来的事件,使用句柄的方式能够设置多个事件
<script>
/*首先通过getElementById找到元素*/
var x = document.getElementById("xid");
/*使用addEventListener添加句柄,第一个值表示类型,"click"表示点击,不能加上"on",第二个值为定义的函数,可以是已有函数,也可以是匿名内部函数*/
x.addEventListener("click", function () {
alert("1234");
});
/*添加已有函数时不需要添加(),如添加abcd函数只需要写上abcd*/
p.addEventListener("click", abcd);
function abcd() {
alert("abcd");
}
/*可以添加句柄,自然也可以移除句柄,使用removeEventListener() 就可以移除,参数同上*/
</script>
JavaScript中的DOM事件处理:
每次触发DOM事件时都会产生一个event对象,event有如下的属性和方法:
两个属性:
type:事件的类型
target:事件的目标(触发事件的html控件的类型)
两个方法:
stopPropagation():阻止事件的冒泡
preventDefault():阻止事件的默认行为
以下为代码演示(type,target):
<div id="divid">
<p id="pid">123</p>
</div>
</body>
<script>
document.getElementById("pid").addEventListener("click", function (ev) {
alert(ev.target); //显示结果:[object HTMLParagraphElement]
alert(ev.type);//显示结果:click
})
</script>
修改JavaScript代码如下(stopPropagation()):
<script>
document.getElementById("pid").addEventListener("click", function (ev) {
alert(ev.target);
alert(ev.type);
/*
一般来说,div中的click是不会被点击触发的
但根据冒泡规则,div元素的内容也会被跟着触发
这显然不是我们想要的
使用stopPropagation()可以停止这种冒泡传递
*/
ev.stopPropagation();
})
document.getElementById("divid").addEventListener("click", function (ev) {
alert("No");
})
</script>
修改页面代码如下:
<body>
<a id="aid" href="">html</a>
</body>
<script>
document.getElementById("aid").addEventListener("click", function (ev) {
/*一般点击a元素会默认触发跳转的功能,使用preventDefault()就可以阻止这种默认功能*/
ev.preventDefault();
})
</script>
JavaScript中事件的兼容:
DOM0级事件处理:使用例如onclick属性直接给元素添加函数,
优点:书写简单,绝大部分浏览器都支持
缺点:只能添加一个事件
DOM2级事件处理:使用addEventListener,(或者兼容IE需要使用attachEvent()、detachEvent()来实现DOM2级事件处理,参数几乎一样,区别是第一个参数要以"on"开头 )给元素添加事件
优点:可以添加多个事件
缺点:书写略复杂,有年代的浏览器可能不支持
总而言之:使用DOM事件处理时需要考虑浏览器兼容问题,可以使用if…else if…else判断浏览器是否支持DOM2的添加方式(还有兼容IE的DOM2),否则使用DOM0的方式添加事件,如下示例():
/*以下使用点击作为事件的触发条件*/
var element = document.getElementById("id");
if(element.addEventListener){
element.addEventListener("click",f);
}else if(element.attachEvent){
element.attachEvent("onclick",f);
}else{
element.onclick = f();
}
function f() {
...
}
Javascript使用DOM对象控制HTML元素:
<!--以下为示例得body和script代码-->
<body>
<p name="pname" id="pid">a</p>
<p name="pname" id="pid2">a</p>
<p name="pname">a</p>
<p name="pname">a</p>
<p name="pname">a</p>
</body>
<script>
/*
通过getElementsByname可以通过name属性来找到元素,由于name不是id需要有唯一性,所以找到得元素也有可能是一组元素,所以统一返回一个数组
*/
var plist = document.getElementsByName("pname");
/*也可以通过元素得名称查找,同理,也会返回一个数组*/
var plist = document.getElementsByTagName("p");
/*可以通过getAttribute获取元素里的属性*/
var attribute = document.getElementById("pid").getAttribute("name");
alert(attribute); //输出结果:pname
/*可以获取,自然也可以修改,第二个值为修改后得内容*/
document.getElementById("pid").setAttribute("name", "no");
/*可以看看有没有修改成功*/
alert(document.getElementById("pid").getAttribute("name")); //输出结果:no
/*document.body可以直接表示body元素,childNodes会找到body得子元素,但是由于各个浏览器之间得差异,所以结果会有所不同*/
var childNodes = document.body.childNodes;
alert(childNodes.length);
/*可以找到元素得子节点,自然也可以找到元素得父节点,使用parentNode可以找到父节点,与找子节点不同,找父节点不会返回一个数组,因为直接的父节点不会有多个*/
var parentNode = document.getElementById("pid").parentNode;
alert(parentNode);
/*
JSDOM可不仅仅就只能查看页面已有的信息,还可以自己创建一个节点!
*/
/*获取body元素比较简单,不需要使用id去找了,JavaScript直接提供了简单的方法获取body,*/
var body = document.body;
/*createElement表示创建节点,参数为节点的类型*/
var element = document.createElement("h1");
/*由于我们创建的是一个h1元素,所以需要设置内容才比较号观察*/
element.innerHTML="123";
/*在body的子节点末尾添加上新元素*/
body.appendChild(element);
/*也许你并不想直接添加在末尾,不妨试试使用insertBefore,就像它的名字一样,你可以把新元素插在某个旧元素前面,插入之前你需要旧元素的对象*/
var pid2 = document.getElementById("pid2");
/*参数(新元素,旧元素)*/
body.insertBefore(element,pid2);
/*移除元素就比较简单了,只要找到元素的对象就可以了*/
body.removeChild(element);
/*offserHeight和offsetWidth可以获取屏幕的高度和宽度,不包括滚动条,如果需要的化,只要把offset改成scroll就行了*/
alert(document.body.offsetHeight);
alert(document.body.offsetWidth);
</script>
也可以通过使用setAttribute()设置对象属性
通过getAttribute()可以获得对象属性值
设置css的语法:
对象.style.xxx = xxx;
只要获取了对象,可以直接通过使用style属性设置值