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属性设置值
548
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
