XML DOM , HTML DOM "DOM"叫文档操作模型。
html dom只有五个对象。
对文档树进行导航
<body>
<div id="div1">
<div>hello div</div>
<p>ppppp</p>
</div>
<script>
var ele=document.getElementById("div1")
alert(ele.firstElementChild) // 找到 div1 的第一个孩子
</script>
</body>
<script>
var ele=document.getElementById("div1").firstElementChild
alert(ele.nextElementSibling) // 找到 div 的下一个兄弟
</script>
<script>
var ele=document.getElementById("div1")
alert(ele.parentElement) // 找到 div1 的父亲。
</script>
标签对象的全局和局部查找
- 寻找对象的方式:
<body>
<div id="div1">hello
<div class="div2">hello 2</div>
<div class="div3">hello 3</div>
</div>
<script>
var ele=document.getElementsByClassName("div2")[0]; //注意利用class找到是一个数组,所以,后面要加[0]进行索引。
var ele2=ele.nextElementSibling;
alert(ele2.innerHTML); // innerHTML 是取对象的内容。
</script>
</body>
- 通过标签名找:
var tag=document.getElementsByTagName("p")
alert(tag[0].innerHTML)
- 通过name属性找:
<body>
<div id="div1">hello
<div class="div2">hello 2</div>
<div name="gf">hello 3</div>
<p>pppp</p>
</div>
<script>
var name1=document.getElementsByName("gf")
for (var i in name1){
console.log(name1[i].innerHTML)
}
</script>
局部查找
<body>
<div id="div1">hello
<div class="div2">hello 2</div>
<div class="div3">hello 3
<p>hello inner</p>
</div>
<p>pppp</p>
</div>
<script>
var ele=document.getElementsByClassName("div3")[0]; //注意这两个 []
var ele2=ele.getElementsByTagName("p")[0]
alert(ele2.innerHTML)
</script>
</body>
HTML DOM 事件
- 实现一个点击输入框时,里面的内容消失的效果:
onfocus事件:焦点操作,当鼠标点击输入框时获取焦点时触发
onblur事件:焦点操作,鼠标失去焦点时触发
<body>
<input type="text" value="输入用户名" onfocus="fun1()" onblur="fun2()" class="keyword">
<br/>
<input type="text">
<script>
function fun1() {
var inp=document.getElementsByClassName("keyword")[0];
inp.value="";
}
function fun2() {
var inp=document.getElementsByClassName("keyword")[0];
if (inp.value.trim()==""){ //trim()是去掉空格,因为空格也是一个字符。
inp.value="输入用户名";
}
}
</script>
</body>
onchange事件:发生改变就触发
<body>
<select onchange="fun1()">
<!--onchange事件:一旦离开选择就会触发-->
<option>北京</option>
<option>天津</option>
<option>广州</option>
<option>满洲里</option>
</select>
<script>
function fun1() {
alert("发生改变")
}
</script>
</body>
event 对象:主要是封闭,键盘,鼠标的状态信息,下面的代码是当点击按扭,再点键盘上的任意一个键,会显示这个键的对应码
<body>
<input type="button" value="点点" onkeydown="func1(event)">
<script>
function func1(e) {
alert(e.keyCode)
}
</script>
</body>
在浏览器端控制提交
<body>
<form onsubmit="ck()"> //注意在这里加事件。如果不行,可以这样 οnsubmit="return ck()"
<input type="text">
<input type="submit">
</form>
<script>
function ck() {
alert("aaa")
return false; //无论输入什么都不会提交,条件可以用正则来控制,完成提交。
}
</script>
</body>
触发事件的第二种方式
<script>
var obj=document.getElementsByClassName("p")[0]; //找到p标签
obj.onclick=function () {
alert(123)
}
</script>
阻止事件传播:如果大的DIV有一个事件,里面的小DIV还有一个事件,那么当点击小DIV时,大DIV的事件也会执行,这叫“事件传播”
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#div1{
background-color: #cea86f;
width: 300px;
height: 200px;
}
#div2{
background-color: blue;
width: 100px;
height: 100px;
}
</style>
<body>
<div id="div1" onclick="alert('div1')">
<div id="div2" onclick="f(event)"></div>
</div>
<script>
function f(event) {
alert("div2");
event.stopPropagation(); //阻止事件传播
}
</script>
</body>
</html>
利用JS进行增、删、改、查标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<style>
#div1{
background-color: #cea86f;
height: 200px;
}
</style>
</head>
<body>
<div id="div1" style="overflow: auto"> <!--style="overflow: auto"加的滚动条,加多了会溢出。-->
<div id="div2">hello div2</div>
<p>hello p</p>
</div>
<input type="button" value="增" onclick="add()">
<input type="button" value="删" onclick="remove()">
<script>
function add() {
var ele=document.getElementById("div1") ;//首先找到父级标签
var son=document.createElement("p") ;//然后创建一个要创建的对象
ele.appendChild(son); //给父亲添加一个孩子
son.innerHTML="添加的孩子P,成功~~"
// son.innerText="添加的内容不转意";
}
function remove() {
var ele=document.getElementById("div1") ;//首先找到父级标签
var last_son=ele.lastElementChild; //找到最后个孩子
ele.removeChild(last_son);
// 注意 ele.classList.add("class"); //这样还添加一个CSS样式
// ele.style.backgroundColor="#f0f" //这样指定颜色
// ele.classList.remove("class") //删除CSS样式
}
</script>
</body>
</html>