DOM-Document Object Model 文档对象模型

第一部分：Dom获取元素

第二部分：DOM属性设置与获取

第三部分：事件（鼠标事件、键盘事件、表单事件）

DOM-Document Object Model 文档对象模型

DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和css功能的一类对象的集合。也有人称DOM是对HTML以及XML的标准编程接口。

第一部分：Dom获取HTML元素

方法一：

document代表整个文档
getElementById() //获得一个有着给定id属性值的元素，该元素不存在时，返回null
getElementsByTagName() //到元素们的标签名得到的元素为数组
getElementsByClassName() // 根据类选择器返回所有匹配到的元素数组，如果没有匹配到，则返回空数组; 支持： Chrome 4.0+, FireFox 3.0+, Safari 3.2+, Opera 10.1+, IE 8+
getElementsByName(); //，IE不支持需注意，只有部分标签name可生效（表单，表单元素，img，iframe）
querySelector() // 根据CSS选择器返回第一个匹配到的元素，如果没有匹配到，则返回null;
querySelectorAll() //根据CSS选择器返回所有匹配到的元素数组，如果没有匹配到，则返回空数组; 在ie7和ie7以下的版本中没有，

具体例子理解

[code]  <div id=\"box\"><input type=\"text\" name=\"idea\"><img src=\"\" alt=\"\"  name=\"idea\"><div class=\"main\"><ul><li class=\"first\">我是第一个li标签</li><li>这也是一个li标签</li><li>这也是一个li标签</li></ul><p class=\"first\">我是第一个p标签</p><p>这也是一个p标签</p><a href=\"\" class=\"first\">我是第一个a标签</a></div></div>

（1）document.getElementById（\”id\”）方法：获得一个有着给定id属性值的元素，\”id\”为DOM元素上id属性的值,要注意大小写。

id值必须加引号放在括号里。在css中id是独一无二的

[code]var a1=document.getElementById(\"box\");//获取id名为\"box\"的元素console.log(a1);console.log(typeof a1);//这个方法返回值是对象objectvar a2=document.getElementById(\"bigBox\");//获取一个不存在的id，结果返回nullconsole.log(a2);//null

执行结果：

（2）document.getElementsByTagName（\”TagName\”）：获得一个有着给定标签名的元素。\”TagName\”是元素的标签名，返回的是htmlcollection 集合 , 用法和数组一致。页面中不存在要获取的标签时，则返回空数组。

[code]var b1=document.getElementsByTagName(\"div\");//通过标签名选择元素，返回值是对象数组console.log(b1);//返回对象数组console.log(typeof b1);//objectvar b2=document.getElementsByTagName(\"span\");//获取一个页面中没有的标签console.log(b2);//返回空数组 HTMLCollection []

执行结果：

（3）getElementsByClassName(”class“)： class为DOM元素上class属性的值，返回的是htmlcollection 集合 , 用法和数组一致。当不存在要获取的类名时，则返回 HTMLCollection [];

[code]var c1=document.getElementsByClassName(\"first\");//获取所有类名为first的元素var c2=document.getElementsByClassName(\"first\")[1];//获取类名为first的p元素var c3=document.getElementsByClassName(\"last\");//获取一个不存在的类名，会返回空数组console.log(c1);//console.log(typeof c1);console.log(c2);//console.log(typeof c2);console.log(c3);//空数组 HTMLCollection []

执行结果：

（4）getElementsByName(\”name\”); //IE不支持需注意。name为DOM元素上name属性的值，只有部分标签name可生效（表单，表单元素，img，iframe）。返回的是NodeList 类型, 用法和数组一致。获取一个不存在的name值时，会返回NodeList[]。

[code]var d1=document.getElementsByName(\"idea\");//获取name为\"idea\"的元素var d2=document.getElementsByName(\"idea\")[0];//获取第一个name为\"idea\"的元素var d3=document.getElementsByName(\"haha\");//获取name值为\"haha\"的元素console.log(d1);console.log(d2);console.log(d3);

执行结果：

（5）querySelector()：通过选择器获取一个元素，返回第一个匹配到的元素，如果没有匹配到，则返回null;

[code]var f1=document.querySelector(\".main>ul>li.first\");//获取第一个li标签var f2=document.querySelector(\".main>ul>li\");//获取所有的li标签，结果返回第一个匹配到的元素console.log(f1);console.log(f2);

执行结果：

（6）querySelectorAll()：根据CSS选择器返回所有匹配到的元素数组，返回NodeList类型，用法和数组一致。如果没有匹配到，则返回空数组NodeList[];

[code]var g1=document.querySelectorAll(\".main>ul>li\");//获取所有的li标签var g2=document.querySelectorAll(\".main>ul>li\")[1];//选择获取到的第二个li标签console.log(g1);console.log(g2);

方法二：

利用节点关系获取元素：

利用节点关系访问HTML元素的属性和方法如下：

parentNode 返回父节点
previousSibiling 返回当前节点的前一个兄弟节点
nextSibiling 返回当前节点的后一个兄弟节点
firstChild 返回当前节点的第一个子节点
lastChild 返回当前节点的最后一个子节点
nodeType 属性返回以数字值返回指定节点的节点类型。返回（元素节点是1 属性节点是2 文本节点是3）
nodeName 属性指定节点的节点名称。

例子：

[code] /*--------------------------------css样式--------------------------------- */<style>#n3{color:red;}</style><!---------------------------- html结构------------------------------- --><ul id=\"myul\"><li id=\"n1\">1111</li><li id=\"n2\">2222</li><li id=\"n3\">unique</li><li id=\"n4\">4444</li><li id=\"n5\">5555</li></ul><input type=\"button\" value=\"父节点\" onclick=\"showContent(curr.parentNode)\"/><!--找到id=\"n3\"元素的父节点-ul--><input type=\"button\" value=\"第一个子节点\" onclick=\"showContent(curr.parentNode.firstChild.nextSibling)\"/><!--谷歌火狐浏览器会把空格也看作一个元素, 这里加nextSibling--><input type=\"button\" value=\"上一个节点\" onclick=\"showContent(curr.previousSibling.previousSibling)\"/><input type=\"button\" value=\"下一个节点\" onclick=\"showContent(curr.nextSibling.nextSibling)\"/><input type=\"button\" value=\"最后一个子节点\"onclick=\"showContent(curr.parentNode.lastChild.previousSibling)\"/><input type=\"button\" value=\"得到所有li元素的个数\"onclick=\"showCountLi()\"/>//---------------------------------js--------------------------------------<script>var curr=document.getElementById(\"n3\");function showContent(target){alert(target.innerHTML);}function showCountLi(){alert(document.getElementsByTagName(\"li\").length);//5个}</script>

结果如下图：

这样就能很清晰的看到获得的节点元素了

第二部分:DOM对HTML元素访问

（1）DOM访问表单控件常用属性和方法

action 返回该表单提交地址
elements 返回表单内全部表单控件所组成的数组，通过数组可以访问表单内的任何表单控件
length 返回表单内表单域的个数
method 返回表单的method属性，主要有get和post两个值
target 确定提交表单的结果窗口，主要有 _self、_blank、_top等
reset()、submit() 重置表单和确定表单方法

在elements返回的数组中访问具体的表单控件语法

.elements[index] 返回该表单第index个表单控件
.elements[elementName] 返回表单内id或者name为elemenName的表单控件
.elementName 返回表单中id或者name为elemenName的表单控件，比.elements[elementName] 更直接

例子：

[code]<body><!-- ----------------------------------html------------------------------------ --><form id=\"myForm\" action=\"http://www.baidu.com\" method=\"GET\" target=\"_blank\"><input name=\"usename\" type=\"text\" value=\"微雨陌兰\"><input name=\"password\" type=\"text\" value=\"9876543\" ><select name=\"city\" id=\"\"><option value=\"hangzhou\">杭州</option><option value=\"beijing\">北京</option></select></br><input type=\"button\" value=\"获取表单第一个控件\"onclick=\"alert(document.getElementById(\'myForm\').elements[0].value)\"/><!--获取表单第一个控件的值--><input type=\"button\" value=\"获取表单第二个控件\"onclick=\"alert(document.getElementById(\'myForm\').elements[\'password\'].value)\"><input type=\"button\" value=\"获取表单第三个控件\"onclick=\"alert(document.getElementById(\'myForm\').city.value)\"><input type=\"button\" value=\"操作控件\" onclick=\"operatorForm()\"></form><!-- -------------------------------------------js-------------------------------------- --><script>function operatorForm(){// var myform=document.getElementById(\"myForm\");var myform=document.forms[0];// alert(myform.action);// alert(myform.method);// alert(myform.target);myform.submit();//提交表单// myform.reset();//重置表单}</script></body>

结果如下图：

（2）Dom访问列表框、下拉菜单的常用属性

form 返回下拉框、下拉菜单所在的表单对象
length 返回下拉框、下拉菜单的选项个数
options 返回下拉框、下拉菜单所有选项组成的数组
selectedIndex 返回下拉列表中选项的索引
type 返回下拉列表的类型、多选的话返回select-multiple，单选返回select-one

使用options[index] 返回具体选项所对应的常用属性

defaultSelected 返回该选项默认是否被选中
index 返回该选项在列框、下拉菜单中的索引
selected 返回该选项是否被选中
text 返回该选项呈现的文本
value 返回该选项的value属性值
注意区分text和value，这里\”杭州\”是\”text\”,\”hangzhou\”是\”value\”,其中value是要传给服务器端的数据

[code] <option value=\"hangzhou\">杭州</option>

例子：

[code]<!----------------------------------html------------------------------------><select name=\"city\" id=\"city\" size=\"5\"><option value=\"hangzhou\">杭州</option><option value=\"beijing\" >北京</option><option value=\"nanjing\" selected=\"selected\"> 南京</option><option value=\"shenzhen\">深圳</option><option value=\"xi\'an\"> 西安</option></select></br><input type=\"button\" value=\"第一个城市\" onclick=\"change(s_city.options[0])\">/<input type=\"button\" value=\"上一个城市\"onclick=\"change(s_city.options[s_city.selectedIndex-1])\" /><input type=\"button\" value=\"下一个城市\"onclick=\"change(s_city.options[s_city.selectedIndex+1])\"/><input type=\"button\" value=\"最后一个城市\"onclick=\"change(s_city.options[s_city.length-1])\"/><!-- --------------------------------js----------------------------------------- --><script>var s_city=document.getElementById(\"city\");var change=function(city){alert(city.text);}

结果如下图：

（3）DOM访问表格子元素的常用属性和方法

caption 返回表格的标题对象
rows 返回表格里的所有表格行
tbodies
tfoot
thead

通过rows[index]返回表格指定的行所对应的属性

cells 返回该行内所有单元格组成的数组
rowIndex 返回该行在表格中的索引值
sectionRowIndex 返回该行内在其所在元素（tbody，thead等元素）的索引值

例子：

[code] <!-----------------------------------html---------------------------><table id= \"myTable\" border=\"1px\" cellspacing=\"0\"><caption>前端发展阶段</caption><tr><td ></td><td>初级</td><td>中级</td><td>高级</td><td>专家</td></tr><tr><td>标准</td><td>被产品怼得说不出话</td><td>互怼不相上下</td><td>怼的产品没话说</td><td>产品被怼离职</td></tr><tr><td>用户A</td><td>可以做到</td><td>可以做到</td><td>怂了</td><td>没想过</td></tr><tr><td>用户B</td><td>小意思</td><td>小意思</td><td>小意思</td><td>完全不在话下</td></tr></table><input type=\"button\" value=\"表格标题\" onclick=\'alert(document.getElementById(\"myTable\").caption.innerHTML);\'/><input type=\"button\" value=\"第二行、第二格\"onclick=\'alert(document.getElementById(\"myTable\").rows[0].cells[1].innerHTML)\'/><input type=\"button\" value=\"第三行、第三格\"onclick=\'alert(document.getElementById(\"myTable\").rows[1].cells[3].innerHTML)\'/><input type=\"button\" value=\"第四行、第四格\"onclick=\'alert(document.getElementById(\"myTable\").rows[2].cells[4].innerHTML)\'/><br/>设置指定单元格的值：第<input type=\"text\" id=\"row\" size=\"2\"/>行,第<input type=\"text\" id=\"cell\" size=\"2\"/>列的值为<input type=\"text\" id=\"change\" size=\"10\"><input type=\"button\" id=\"btn_set\" value=\"修改\" onclick=\"change()\"/><!---------------------------------js-------------------------------><script>function change(){var row=document.getElementById(\"row\").value;var cell=document.getElementById(\"cell\").value;var t=document.getElementById(\"myTable\");t.rows[row-1].cells[cell-1].innerHTML=document.getElementById(\"change\").value;//也可以通过item来访问// t.rows[row-1].cells[cell-1].innerHTML=document.getElementById(\"change\").value;}</script>

结果如下：

第三部分：DOM对元素增删改

（1）DOM 创建节点的方法

document.createElement(Tag) Tag必须是合法的HTML元素
document.createTextNode(\”文本\”) 创建文本节点
document.createCommet(\”注释文本\”）创建注释节点

（2）DOM复制节点

节点.cloneNode(boolean deep),当参数deep为true时，表示复制当前节点以及当前节点的全部后代节点。（也成为“深复制”）；当参数deep为false时，只复制当前节点。

（3）添加删除节点

appendChild(newNode）将newNode添加成当前节点的最后一个子节点（与push()功能相似），如果是把页面已有的元素添加到另一个位置时是剪贴功能。
insertBefore(newNode,refNode) 在refNode节点之前插入newNode节点，返回新的子节点
replaceChild(newNode,oldNode) 将oldNode节点替换成newNode节点
removeChild(oldNode) 将oldNode子节点删除，如果删除成功，则返回被删除的节点，如果失败，则返回null，方使用removeChild()方法删除节点时，该节点所包含的所有子节点将同时被删除

例子：

[code]<!---------------------------html------------------------------------><ul id=\"city\"><li>北京</li><li>上海</li></ul><input type=\"button\" value=\"创建复制替换节点\" onclick=\"create()\"><input type=\"button\" value=\"复制节点\" onclick=\"copy()\"><input type=\"button\" value=\"删除节点\" onclick=\"del()\"><!---------------------------js----------------------------------------><script>//节点插入function create(){var city=document.getElementById(\"city\");var liEle=document.createElement(\"li\");liEle.innerHTML=\"乌鲁木齐\";// city.appendChild(liEle);//插入新节点// city.insertBefore(liEle,city.firstChild.nextSibling);//在北京之前插入新节点// city.replaceChild(liEle,city.firstChild.nextSibling) //节点替换，将li第一个节点替换// city.removeChild(city.firstChild.nextSibling);//节点删除，删除第一个节点}//节点复制function copy(){var city=document.getElementById(\"city\");var ele=city.firstChild.nextSibling.cloneNode(true);//复制北京节点，注意深浅复制结果不同city.appendChild(ele);}//节点删除function del(){var city=document.getElementById(\"city\");var ele=city.firstChild.nextSibling;//删除北京节点city.removeChild(ele);}</script>

结果如下：

（4）DOM为列表框下拉菜单添加选项方法

第一步：创建选项除了createElement方法之外，还可以使用专门的构造器来构造一个选项，其中有四个参数

[code]  new Option(text,value,defaultSelected,selected);

参数可以不全部指定，假如指定一个参数，就指明text；假如指定两个参数，第一个参数时text，第二个是value。

第二步：添加创建好的选项到列表框或下拉菜单方法：直接为<select>的指定选项赋值

列表框或下拉对象.options[i]=创建好的option对象

（5）删除列表框、下拉菜单选项方法

直接使用列表框或下拉对象.remove(index)方法删除指定选项
列表框或下拉对象.remove(index)或者options[index]=null

例子：

[code]<!--------------------------------html----------------------------------><body id=\"body\"><input type=\"button\" value=\"创建一个水果列表框\" onclick=\"create()\"><input type=\"button\" value=\"分条删除列表框内容\" onclick=\"delOneByOne()\"><input type=\"button\" value=\"一次性清空列表框内容\" onclick=\"delAll()\"></body><!---------------------------------js--------------------------------><script>//创建列表框function create(){var ele=document.createElement(\"select\");for(var i=0;i<10;i++){var op= new Option(\"水果\"+i,i);ele.options[i]=op;}ele.size=5;ele.id=\"fruits\";document.getElementById(\"body\").appendChild(ele);}//选项分条删除function delOneByOne(){var fruits=document.getElementById(\"fruits\");if(fruits.options.length>0){// fruits.remove(fruits.options.length-1);//分条删除列表选项fruits.options[fruits.options.length-1]=null;}}//清空选项function delAll(){var fruits=document.getElementById(\"fruits\");if(fruits.options.length>0){fruits.options.length=0;//将选项数设为0}}</script>

结果如下：

（6）DOM操作表格元素

动态添加/删除表格内容

insertRow(index) 在指定索引位置插入一行
createCaption 为该表格创建标题
createTFoot 为该表格创建<tfoot>元素，假如存在就返回已有的
createTHead，同上
deleteRow(index) 删除表格中指定索引位置的行
deleteCaption/TFoot/Thead

给表格行创建、删除单元格的方法

insertCell(index) 在index处创建一个单元格，返回新创建的单元格
deleteCell(index) 删除某行在index处的单元格

属性设置与获取

（1）获取属性：ele.getAttribute( “attribute” ) 功能是获取ele元素的attribute属性。其中ele是要操作的dom对象，attribute是要获取的html属性（如：id 、type）

（2）设置属性：ele.setAttribute(”attribute”,value) 功能:在ele元素上设置属性。其中ele是要操作的dom对象，attribute为要设置的属性名称，value为设置的attribute属性的值。
（3）删除属性：ele.removeAttribute(”attribute\” ）功能:删除ele,上的attribute属性，其中ele是要操作的dom对象，attribute是要删除的属性名称
（4）添加样式： ele.style.styleName=styleValue；功能是设置ele元素的CSS样式

[code]var box=document.getElementById(\"box\");box.style.width=\"100px\";box.style.backgroundColor=\"#f00\"//像background-color这样带有短横线的属性要是用驼峰命名的方式。//或者写成下面的box.style=\"width:100px; background-color:#f00;\";//

这里可以用\”[]\”代替\”.\”操作

看个例子：

[code]#box{width: 100px; height: 100px;background-color: blue;}//css样式<div id=\"box\"> 一段文字</div>//html<script>var div1 = document.getElementById(\"box\");div1.onclick=function(){//div1.style=\"color:green; background-color:red; font-size:40px; \"// div1[\"style\"]=\"color:green; background-color:red; font-size:40px;\"div1.style.cssText=\" color:green;background-color:red; font-size:40px;\"// div1[\"style\"][\"cssText\"]=\" color:green;background-color:red; font-size:40px;\"}</script>

大家可以试一下，注释里的其他三条也都能实现，鼠标点击div改变div样式的效果。

（5）获取和设置元素标签的内容（innerHTML与innerText)

几乎所有DOM元素都有innerText,innertHTML属性(注意大小写),分别是元素标签内的文本表示形式和HTML源代码，这两个属性是可读可写的。

①innerHTML

innerHTML可获取或设置指定元素标签内的 html内容，从该元素标签的起始位置到终止位置的全部内容(包含html标签)。

获取元素的内容：element.innerHTML;

给元素设置内容：element.innerHTML =htmlString;
代码示例为：

[code] <p id=\"content\">山气日夕佳</p>var content=document.getElementById(\"content\").innerHTML;//获取p元素的内容 \"山气日夕佳\"var a=document.getElementById(\"content\").innerHTML=\"<li>这是新增的内容</li>\";//新增内容

结果：

②innerText

innerText可获取或设置指定元素标签内的文本值，从该元素标签的起始位置到终止位置的全部文本内容(不包含html标签)。
获取元素的内容：element.innerText;给元素设置内容：element.innerText = string;
代码示例为：

[code]  var content=document.getElementById(\"content\").innerText;console.log(content);//山气日夕佳var a=document.getElementById(\"content\").innerText=\"<li>这是新增的内容</li>\";console.log(a)//<li>这是新增的内容</li>

结果：

③innerHTML和innerText区别：

使用innerHtml会转义成HTML；加粗显示出来；使用innerText不会转译，标签也会显示。

innerHTML返回的是标签内的 html内容，包含html标签。

innerText返回的是标签内的文本值，不包含html标签。

特别说明：

　　innerHTML是符合W3C标准的属性，而innerText只适用于I部分浏览器，例如火狐浏览器严格遵守规范不支持innerText，因此，尽可能地去使用innerHTML，而少用innerText。

这里再记录一下，解决火狐浏览器对innerText不兼容的解决方案，IE、Safari、Opera和Chrome支持innerText属性。Firefox虽然不支持innerText，但支持作用类似的textContent属性。textContent是DOM3级规定的一个属性，而且也得到了safari、opera和Chrome的支持。

[code]var div = document.getElementById(\"content\");function getInnerText(element) {return (typeof element.textContent == \"string\") ? element.textContent : element.innerText;}

第四部分：事件（鼠标事件、键盘事件、表单事件）

注意：在事件触发的函数中, this是对该DOM对象的引用。

鼠标事件

onload :页面加载时触发
onclick :鼠标点击时触发
onmouseover :鼠标滑过时触发
onmouseout :鼠标离开时触发
onfocus :获得焦点时触发 ,事件用于：
input标签type为text、password; textarea;
onblur :失去焦点时触发
onchange：域的内容改变时发生，一般作用于select或checkbox或radio
onsubmit:表单中的确认按钮被点击时发生：不是加在按钮上，而是在表单上（from）。
onmousedown : 鼠标按钮在元素上按下时触发.
onmousemove :在鼠标指针移动时发生
onmouseup :在元素上松开鼠标按钮时触发

练习：一个鼠标滑入滑出改变盒子状态的案例

[code]<!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>.first{width: 100px;height: 80px;margin-bottom: 50px;background-color:yellow;}.second{width: 100px;height: 80px;background-color:purple;}</style></head><body><div class=\"first\"></div><div class=\"second\"></div><script>var first=document.getElementsByTagName(\"div\")[0];var second=document.getElementsByTagName(\"div\")[1];first.onmouseover=function(){second.style.backgroundColor=\"green\";}first.onmouseout=function(){second.style.backgroundColor=\"purple\";}second.onmouseover=function(){first.style.backgroundColor=\"green\";}second.onmouseout=function(){first.style.backgroundColor=\"yellow\";}</script></body></html>

键盘事件

onkeydown(键盘按下)
onkeyup(键盘抬起)
onkeypress(按键事件)

JS基础知识篇-DOM操作总结

DOM-Document Object Model 文档对象模型

第一部分：Dom获取HTML元素

第二部分:DOM对HTML元素访问

第三部分：DOM对元素增删改

第四部分：事件（鼠标事件、键盘事件、表单事件）

相关推荐

热门文章

热门标签

回顶部