javaScript中的DOM补充
一、DOM树
二、DOM节点
DOM 是这样规定的：
整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
其中，document与element节点是重点。
三、节点查找
（1）直接查找节点
|
1
2
3
4
|
document.getElementById(“idname”)document.getElementsByTagName(“tagname”)document.getElementsByName(“name”)document.getElementsByClassName(“name”) |
<div >
<div class="div2">i am div2</div>
<div name="yuan">i am div2</div>
<div >i am div2</div>
<p>hello p</p>
</div>
<script>
var div1=document.getElementById("div1");
</script>
（2）、导航节点属性
parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
注意，js中没有办法找到所有的兄弟标签！
四、节点操作
（1）、创建节点
1.createElement(标签名) ：创建一个指定名称的元素。
例：var tag=document.createElement(“input")
tag.setAttribute('type','text');
（2）、添加节点
2.somenode.appendChild(newnode) ：追加节点（作最后的子节点）
（3）、删除节点
3.removeChild()：获得要删除的元素，通过父元素调用删除
（4）. 替换节点
4. somenode.replaceChild(newnode, 某个节点);
五、节点属性操作
1、获取文本节点的值：innerText innerHTML
2、attribute操作
elementNode.setAttribute(name,value) elementNode.getAttribute(属性名) <-------------->elementNode.属性名(DHTML) elementNode.removeAttribute(“属性名”);
3.value获取当前选中的value的值
1.input
2.select （selectedIndex）
3.textarea
4、innerHTML 给节点添加html代码：
该方法不是w3c的标准，但是主流浏览器支持
tag.innerHTML = “<p>要显示内容</p>”;
5、关于class的操作：
elementNode.className
elementNode.classList.add
elementNode.classList.remove
6、改变css样式：
<p >Hello world!</p>
document.getElementById("p2").style.color="blue";
.style.fontSize=48px
六、事件类型
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开
onselect 文本被选中。
onsubmit 确认按钮被点击。
七、绑定事件
方式一：
<div >点我呀</div>
<script>
function foo(self){ // 形参不能是this;
console.log("点你大爷!");
console.log(self);
}
</script>
方式二：
<p >试一试!</p>
<script>
var ele=document.getElementById("abc");
ele.onclick=function(){
console.log("ok");
console.log(this); // this直接用
};
</script>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" >
<p>姓名<input type="text" name="user" ></p>
<p>年龄<input type="text" name="age" ></p>
<input type="submit" >
</form>
<input type="text" >
<script>
var ele_form=document.getElementById("submit");
var ele_user=document.getElementById("user");
var ele_age=document.getElementById("age");
ele_form.onsubmit=function (event) {
var username=ele_user.value;
var age=ele_age.value;
alert(username);
alert(age);
// 两种阻止默认事件发生的方式
// 方式1
return false
// 方式2
// event.preventDefault()
}
</script>
<script>
var ele=document.getElementById("test")
ele.onkeydown=function (e) {
console.log(e.keyCode);
if (e.keyCode==13){
alert(666)
}
}
</script>
</body>