DOM对象
DOM对象
什么是HTML DOM
- HTML Document Object Model (文档对象模型)
- HTML DOM 定义了访问和操做HTML文档的标准方法
- HTMLDOM把HTML文档呈现为带有元素、属性和文本的树结构(节点树)
DOM树
画DOM树是为了展现文档中各个对象之间的关系，用于对象的导航javascript
DOM节点
节点类型
HTML文档中的每一个成分都是一个节点html
DOM规定：java
- 整个文档是一个文档节点
- 每一个HTML标签是一个元素节点
- 包含在HTML元素中的文本是文本节点
- 每一个HTML属性是一个属性节点
其中，Document与Element节点是重点数组
节点关系
节点树中的节点彼此拥有层级关系浏览器
父(parent)，子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。app
- 在节点树中，顶端节点被称为根（root）
- 每一个节点都有父节点、除了根（它没有父节点）
- 一个节点可拥用任意数量的子节点
- 同胞是拥有相同父节点的节点
下面的图征展现了节点树中的一部分，以及节点之间的关系：ide
访问HTML元素(节点)，访问HTML元素等同于访问节点，咱们可以以不一样的方式来访问HTML元素。函数
节点查找
直接查找
documemt.getElementById() 根据id查找，获得一个element对象
document.getElementsByClassName() 根据class查找，获得多个element构成的数组
document.getElementsByTagName() 根据标签查找，获得多个element构成的数组
document.getElementsByName() 根据name属性查找，得么多个element构成的数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div1"> <div class="div2">i am div2</div> <div name="yuan">i am div2</div> <div id="div3">i am div2</div> <p>hello p</p> </div> <script> var div1=document.getElementById("div1"); ////支持; // var ele= div1.getElementsByTagName("p"); // alert(ele.length); ////支持 // var ele2=div1.getElementsByClassName("div2"); // alert(ele2.length); ////不支持 // var ele3=div1.getElementById("div3"); // alert(ele3.length); ////不支持 // var ele4=div1.getElementsByName("yuan"); // alert(ele4.length) </script> </body> </html>
注意：涉及到寻找元素，注意<script>标签的位置！
导航查找
js中没有办法找到全部的兄弟标签this
parentElement 父节点标签元素
children 全部子标签
firstElementChild 第一个子标签元素
lastElemenChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一兄弟标签元素
节点的增删改查
建立节点
//语法：
createElement("标签名") 建立一个指定名称的元素
例：
var tag = document.createElement("input"); tag.setAttribute("type","text");
添加节点
追加一个子节点(做为最后的子节点)。也可使用此方法从一个元素向另外一个元素移动元素。spa
//语法：追加一个子节点（做为最后的子节点）
父节点对象.appendChild(子节点对象)
//语法：把增长的节点放到某个节点的前边
父节点对象.insertBefore(增长的节点，某个节点)
删除节点
//语法： 获取要删除的元素，经过父元素调用删除 父节点对象.removeChild(子节点)
替换节点
//语法： 父节点对象.replaceChild(新节点，旧节点)
节点属性操做
文本属性操做
- innerHTML
- innerText
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li id="i1">123</li> <li id="i2"><a href="">234</a></li> <li>345</li> <li>456</li> </ul> <script> // 获取文本 let ele = document.getElementById("i2"); console.log(ele.innerHTML); //<a href="">234</a> console.log(ele.innerText); //234 // 赋值文本 // ele.innerHTML = "Ethan"; // ele.innerText = "Ethan"; // ele.innerHTML = "<a href=''>ethan</a>"; // a标签 页面上显示ethan超连接 // ele.innerText = "<a href=''>ethan</a>"; // 文本 <a href=''>ethan</a> </script> </body> </html>
attribute属性操做
设置普通属性
节点对象.setAttribute("属性名", value);
节点对象.getAttribute("属性名");
节点对象.removeAttribute("属性名");
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li id="i1">123</li> </ul> <input type="text" id="i2"> <script> let ele1 = document.getElementById("i1"); let ele2 = document.getElementById("i2"); ele1.setAttribute("ethan","123"); console.log(ele1.getAttribute("ethan")); ele2.value = 0; </script> </body> </html>
value属性操做
适用于标签：
- input
- select
- textarea
class属性操做
节点对象.classList.add() 添加class属性值
节点对象.classList.remove() 删除class属性值
节点对象.className 获取class属性值
指定CSS操做
//语法：
节点对象.style.属性名=属性值；
例：
<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue"; document.getElementById("p2").style.fontSize=48px;
DOM Event(事件)
事件类型
onclick 当用户点击某个对象时调用的事件句柄
ondblclick 当用户双击某个对象时调用的事件句柄
onfocus 元素得到焦点
onblur 元素失去焦点 应用场景：用于表单验证，用户离开某个输入框时，表明已经输入完成，能够对其进行验证
onchange 域的内容被改变 应用场景：一般用于表单元素，当元素内容被改变时触发(三级联动)
onkeydown 某个键盘按键被按下 应用场景：当用户在最后一个输入框按下回车按键时，表单提交。
onkeypress 某个键盘按键被按下并松开
onkeyup 某个键盘按键被松开
onload 一张页面或一幅图像完成加载
onmousedown 鼠标按钮被按下
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标长移到某元素之上
onmouseleave 鼠标从元素离开
onselect 文本被选中
onsubmit 确认按钮被点击
绑定事件方式
方式1：
<div id="div" onclick="foo(this)">点我呀</div>
<script>
function foo(self){ // 形参不能是this;
console.log("不点!");
console.log(self);
}
</script>
方式2：
<p id="abc">试一试!</p>
<script>
var ele=document.getElementById("abc");
ele.onclick=function(){ console.log("ok"); console.log(this); // this直接用 }; </script>
事件介绍
1. onload
- onload属性开发中，只给body元素加。这个属性的触发标志着页面内容被加载完成
- 当有些事性咱们但愿页面加载完马上执行，那么可使用该事件属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload=function(){ var ele=document.getElementById("ppp"); ele.onclick=function(){ alert(123) }; }; // function fun() { // var ele=document.getElementById("ppp"); // ele.onclick=function(){ // alert(123) // }; // } </script> </head> <body> <p id="ppp">hello p</p> </body> </html>
2. onsubmit
- 当表单在提交时触发，该属性也只能给form元素使用
- 应用场景：在表单提交前验证用户输入是否正确。若是验证失败。在该方法中咱们应该阻止表单提交
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload=function(){ //阻止表单提交方式1(). //onsubmit 命名的事件函数,能够接受返回值. 其中返回false表示拦截表单提交.其余为放行. var ele=document.getElementById("form"); ele.onsubmit=function(event) { // alert("验证失败 表单不会提交!"); // return false; // 阻止表单提交方式2 event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动做。 alert("验证失败 表单不会提交!"); event.preventDefault(); } }; </script> </head> <body> <form id="form"> <input type="text"/> <input type="submit" value="点我!" /> </form> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .error{ color: red; margin-left: 10px; } </style> <script> window.onload=function(){ let form=document.getElementById("form"); form.onsubmit=function () { // 校验数据 let user=document.getElementById("user").value; let email=document.getElementById("email").value; console.log(user,email); if (user.length<5){ console.log("长度不够!"); document.getElementById("user").nextElementSibling.innerHTML="长度不够"; setTimeout(function () { document.getElementById("user").nextElementSibling.innerHTML=""; },1000); return false } }; } </script> </head> <body> <input type="text" class="c1"> <hr> <form id="form" action="" method="get"> <div> <label for="user">姓名</label> <input type="text" name="user" id="user"><span class="error"></span> </div> <div> <label for="email">邮箱</label> <input type="text" name="email" id="email"><span class="error"></span> </div> <input type="submit"> </form> </body>
3. 事件传播
<div id="abc_1" style="border:1px solid red;width:300px;height:300px;"> <div id="abc_2" style="border:1px solid red;width:200px;height:200px;"> </div> </div> <script type="text/javascript"> document.getElementById("abc_1").onclick=function(){ alert('111'); }; document.getElementById("abc_2").onclick=function(event){ alert('222'); event.stopPropagation(); //阻止事件向外层div传播. } </script>
4. onselect
<input type="text"> <script> var ele=document.getElementsByTagName("input")[0]; ele.onselect=function(){ alert(123); } </script>
5. onchange
<select name="" id=""> <option value="">111</option> <option value="">222</option> <option value="">333</option> </select> <script> var ele=document.getElementsByTagName("select")[0]; ele.onchange=function(){ alert(123); } </script>
6. onkeydown
Event 对象：Event 对象表明事件的状态，好比事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件一般与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经建立好了,而且会在事件函数被调用时传给事件函数.咱们得到仅仅须要接收一下便可.好比onkeydown,咱们想知道哪一个键被按下了，须要问下event对象的属性，这里就时KeyCode.
<input type="text" id="t1"/> <script type="text/javascript"> var ele=document.getElementById("t1"); ele.onkeydown=function(e){ e=e||window.event; var keynum=e.keyCode; var keychar=String.fromCharCode(keynum); alert(keynum+'----->'+keychar); }; </script>
7. onmouseout与onmouseleave事件的区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #container{ width: 300px; } #title{ cursor: pointer; background: #ccc; } #list{ display: none; background:#fff; } #list div{ line-height: 50px; } #list .item1{ background-color: green; } #list .item2{ background-color: rebeccapurple; } #list .item3{ background-color: lemonchiffon; } </style> </head> <body> <p>先看下使用mouseout的效果:</p> <div id="container"> <div id="title">使用了mouseout事件↓</div> <div id="list"> <div class="item1">第一行</div> <div class="item2">第二行</div> <div class="item3">第三行</div> </div> </div> <script> // 1.不论鼠标指针离开被选元素仍是任何子元素，都会触发 mouseout 事件。 // 2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。 var container=document.getElementById("container"); var title=document.getElementById("title"); var list=document.getElementById("list"); title.onmouseover=function(){ list.style.display="block"; }; container.onmouseleave=function(){ // 改成mouseout试一下 list.style.display="none"; }; /* 由于mouseout事件是会冒泡的，也就是onmouseout事件可能被同时绑定到了container的子元素title和list 上，因此鼠标移出每一个子元素时也都会触发咱们的list.style.display="none"; */ /* 思考: if: list.onmouseout=function(){ list.style.display="none"; }; 为何移出第一行时,整个list会被隐藏? 实际上是一样的道理,onmouseout事件被同时绑定到list和它的三个子元素item上,因此离开任何一个 子元素一样会触发list.style.display="none"; */ </script> </body> </html>
相关文章
- 1. jQuery对象和DOM对象
- 2. Jquery对象和DOM对象
- 3. XMLHttpRequest对象和DOM对象
- 4. jQuery对象与DOM对象
- 5. JQuery对象与DOM对象
- 6. DOM对象和JQuery对象
- 7. DOM对象之document对象
- 8. JQuery对象和DOM对象
- 9. DOM对象和Jquery对象
- 10. BOM对象和DOM对象
- 更多相关文章...
- • XML DOM - CDATASection 对象 - XML DOM 教程
- • XML DOM - Comment 对象 - XML DOM 教程
- • RxJava操作符（一）Creating Observables
- • RxJava操作符（九）Connectable Observable Operators
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
欢迎关注本站公众号,获取更多信息
相关文章
- 1. jQuery对象和DOM对象
- 2. Jquery对象和DOM对象
- 3. XMLHttpRequest对象和DOM对象
- 4. jQuery对象与DOM对象
- 5. JQuery对象与DOM对象
- 6. DOM对象和JQuery对象
- 7. DOM对象之document对象
- 8. JQuery对象和DOM对象
- 9. DOM对象和Jquery对象
- 10. BOM对象和DOM对象