赞
踩
DOM(将HTML文档表达为树的结构):Document Object Model文档对象模型;将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言进行CRUD(增删改查)的动态操作。
W3C DOM 标准被分为 3 个不同的部分:
Document对象
Element元素对象
Attribute属性对象
Text文本对象
Comment注释对象
Node节点对象,其他五个的父对象
核心DOM模型:重点学习以下三个:
Document对象: 1.创建(获取):在html dom模型中,可以使用window对象来获取(因为document对象是window对象的一部分) 1.window.document 2.document 2.方法(此处查看xml文档,因为html文档对dom修改很多) 1.获取Element对象 1.getElementById() 根据id属性值获取元素对象。id属性值一般唯一 2.getElementsByTagName() 根据元素名称获取元素对象们,返回值是一个数组 3.getElementsByClassName()根据class属性值获取元素对象们,返回值是一个数组 4.getElementsByName()根据name属性值获取元素对象们,返回值是一个数组 2.创建其他DOM对象 createAttribute(name) createComment() createElement() createTextNode() 3.属性 Element元素对象 1.获取/创建:通过document来获取和创建 2.方法: 1.removeAttribute() 删除属性 2.setAttribute() 设置属性 Node节点对象(node封装的方法,是所有的文本,属性,dom对象都可以使用的公共方法) 特点:所有DOM对象都可以被认为是一个节点 方法: CRUD dom树: appendChild()向子节点列表的结尾添加新的子节点。 removeChild()删除(并返回)当前节点指定的子节点 replaceChild() 用新节点替换一个子节点 属性: parentNode 返回节点的父节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document对象</title> </head> <body> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> <div class="cls1">div4</div> <div class="cls2">div5</div> <input type="text" name="username"> <script> /** * Document对象: 1.创建(获取):在html dom模型中,可以使用window对象来获取(因为document对象是window对象的一部分) 1.window.document 2.document 2.方法(此处查看xml文档,因为html文档对dom修改很多) 1.获取Element对象 1.getElementById() 根据id属性值获取元素对象。id属性值一般唯一 2.getElementsByTagName() 根据元素名称获取元素对象们,返回值是一个数组 3.getElementsByClassName()根据class属性值获取元素对象们,返回值是一个数组 4.getElementsByName()根据name属性值获取元素对象们,返回值是一个数组 2.创建其他DOM对象 createAttribute(name) createComment() createElement() createTextNode() */ //2.根据元素名称获取元素对象们,返回值是一个数组 var divs=document.getElementsByTagName("div"); //alert(divs.length); //3.根据class属性值获取元素对象们,返回值是一个数组 var divscls=document.getElementsByClassName("cls1"); //alert(divscls.length); //4.getElementsByName()根据name属性值获取元素对象们,返回值是一个数组 var eleusername=document.getElementsByName("username"); //alert(eleusername.length); var table=document.createElement("table"); alert(table); </script> </body> </html>
<!DOCTYPE html> <html> <body> <input value="OK"> <p id="demo">点击按钮来设置按钮的 type 属性。</p> <button onclick=myFunction()>试一下</button> <script> function myFunction() { document.getElementsByTagName("input")[0].setAttribute("type","button"); } </script> <p>Internet Explorer 8 以及更早的版本不支持此方法。</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ border:1px solid hotpink; } #div1{ width: 200px; height: 200px; } #div2{ width: 100px; height: 100px; } #div3{ width: 100px; height: 100px; } </style> </head> <body> <div id="div1"> <div id="div2">div2</div> div1 </div> <!--<a href="" id="del">删除子节点</a>--> <!--href为空相当于在本页面跳转,点一下就跳到当前页面了,在刷新就回去了,我们希望他点了之后不进行超链接的跳转但又可以被点击--> <!--<input type="button" value="删除子节点" id="del">--> <a href="javascript:void(0);" id="del">删除子节点</a> <a href="javascript:void(0);" id="add">添加子节点</a> <script> var elementa=document.getElementById("del"); elementa.onclick=function(){ var div1=document.getElementById("div1"); var div2=document.getElementById("div2"); div1.removeChild(div2); } var elementadd=document.getElementById("add"); elementadd.onclick=function(){ var div1=document.getElementById("div1"); //给div1添加子节点 //创建div节点 var div3=document.createElement("div"); div3.setAttribute("id","div3"); div1.appendChild(div3); } var p=document.getElementById("div2"); alert(p.parentNode); /* 超链接功能: 1.可以被点击,样式 2.点击后跳转到href指定的url 需求:保留一功能去掉二功能 实现方式:href="javascript:void(0);" */ </script> </body> </html>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。