javascript之DOM简介

DOM文档对象模型
DOM文档对象模型是基于HTML树的api，这里可以把HTML结构看成是一颗树形结构，使用DOM可以操作树中的节点，即操作（增删改查）HTML标签。

上图是一个简单的DOM树形结构图，可以使用document对象获取DOM，这个对象是window对象下的，在使用时，可以省略window。
可以把一个HTML标签看做是一个对象，标签中的属性对应的就是对象中的属性，DOM提供了访问他们的方法。

getElementById
getElementById根据html标签的id来获取标签对象：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementById</title>
</head>
<body><form name="baseInfo" action="#" method="post">姓名：<input type="text"   id="name"><br>密码：<input type="password"  id="pwd" ><br><input type="button" id="btn" name="submit" value="提交" /></form>
</body>
<script type="text/javascript">var username = document.getElementById("name");var pwd = document.getElementById("pwd");var btn = document.getElementById("btn");btn.onclick = function(){alert(username.value);alert(pwd.value);};
</script>
</html>

getElementsByName
getElementsByName根据html标签的name来获取一个数组对象，在html标签中name值是可以重复的，所以该方法会返回一个数组对象：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementsByName</title>
</head>
<body><form name="baseInfo" action="#" method="post">input：<input type="text" value="value1"  name="monkey"><br>input：<input type="text" value="value2"  name="monkey"><br>input：<input type="text" value="value3" name="monkey"><br><input type="button" id="btn" name="submit" value="提交" /></form>
</body>
<script type="text/javascript">var arr = document.getElementsByName("monkey");//alert(arr.length);/*for(index in arr){if(!arr.hasOwnProperty(index)){continue;}alert(arr[index].value);}*/for(var i=0; i<arr.length; i++){alert(arr[i].value);}
</script>
</html>

getElementsByTagName
getElementsByTagName根据标签的名字来获取数组对象：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementsByTagName</title>
</head>
<body><form name="baseInfo" action="#" method="post">input：<input type="text" value="value1" name="name"><br>input：<input type="text"  value="value2" name="name"><br>input：<input type="text"  value="value3"  name="name"><br><select name="hobby" id="hobby"><option value="basketball">篮球</option><option value="football">足球</option><option value="volleyball">排球</option></select><br><select name="star" id="star" ><option value="cl">成龙</option><option value="llj">李连杰</option><option value="zzd">甄子丹</option><option value="wj">吴京</option></select><br><input type="button" id="btn" name="submit" value="提交" /></form>
</body>
<script type="text/javascript">/*//获取所有的input元素var inputArr = document.getElementsByTagName("input");alert(inputArr.length);//输出input中type="text"中的 value属性值for(var i=0; i<inputArr.length; i++){if("text" == inputArr[i].type){alert(inputArr[i].value);}}//输出所有option标签中value的值var optionArr = document.getElementsByTagName("option");for(var i=0; i<optionArr.length; i++){alert(optionArr[i].value);}//输出所有下拉框 id="star"中option标签中 value属性的值var star = document.getElementById("star");var optionArr = star.getElementsByTagName("option");for(var i=0; i<optionArr.length; i++){alert(optionArr[i].value);}*///输出下拉框中被选中的value值var btn = document.getElementById("btn");btn.onclick = function(){var optionArr = document.getElementsByTagName("option");for(var i=0; i<optionArr.length; i++){if(optionArr[i].selected){alert(optionArr[i].value);    }}};</script>
</html>

hasChildNodes
hasChildNodes判断当前html标签对象下是否包含子节点。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hasChildNodes</title>
</head>
<body><form name="baseInfo" action="#" method="post">input：<input type="text" value="value1" name="name" id="id1"><br>input：<input type="text"  value="value2" name="name"><br>input：<input type="text"  value="value3"  name="name"><br><select name="hobby" id="hobby"><option value="basketball">篮球</option><option value="football">足球</option><option value="volleyball">排球</option></select><br><select name="star" id="star" ><option value="cl">成龙</option><option value="llj">李连杰</option><option value="zzd">甄子丹</option><option value="wj">吴京</option></select><br><input type="button" id="btn" name="submit" value="提交" /></form>
</body>
<script type="text/javascript">//查看id="hobby"的节点是否含有子节点var hobby = document.getElementById("hobby");alert(hobby.hasChildNodes());//查看id="id1"的节点是否含有子节点var id1 = document.getElementById("id1");alert(id1.hasChildNodes());
</script>
</html>

nodeName、nodeType和nodeValue
在文档中每个节点都有这三个属性：

nodeName，获取节点名字

如果节点是元素节点，nodeName返回这个元素的名称
如果是属性节点，nodeName返回这个属性的名称
如果是文本节点，返回一个内容为#text的字符串

nodeType，返回一个整数，数值表示节点的类型，常用的有下面三个：

元素节点，返回1
属性节点，返回2
文本节点，返回3

nodeValue，获取节点的当前值

元素节点，null
属性节点，当前属性的值
文本节点，返回文本内容

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>节点名称类型和值</title>
</head>
<body><form name="baseInfo" action="#" method="post">input：<input type="text" value="value1" id="monkey1" name="monkey"><br>input：<input type="text" value="value2"  name="monkey"><br>input：<input type="text" value="value3" name="monkey"><br><input type="button" id="btn" name="submit" value="提交" /></form><a id="java" href="http://www.monkey1024.com">java教程</a>
</body>
<script type="text/javascript">/*//元素节点var node = document.getElementById("monkey1");alert(node.nodeName);alert(node.nodeType);alert(node.nodeValue);//文本节点var node = document.getElementById("java");var textNode = node.firstChild;//获取第一个子标签alert(textNode.nodeName);alert(textNode.nodeType);alert(textNode.nodeValue);*///属性节点var node = document.getElementById("java");var attrNode = node.getAttributeNode("href");//获取第一个子标签alert(attrNode.nodeName);alert(attrNode.nodeType);alert(attrNode.nodeValue);
</script>
</html>

replaceNode
replaceNode替换节点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>replaceNode</title>
</head>
<body><form name="baseInfo" action="#" method="post">input：<input type="text" value="value1" name="name" id="id1"><br>input：<input type="text"  value="value2" name="name"><br>input：<input type="text"  value="value3"  name="name"><br><select name="hobby" id="hobby"><option value="basketball">篮球</option><option value="football">足球</option><option id="volleyball" value="volleyball">排球</option></select><br><select name="star" id="star" ><option value="cl">成龙</option><option value="llj">李连杰</option><option value="zzd">甄子丹</option><option id="wj" value="wj">吴京</option></select><br><input type="button" id="btn" name="submit" value="提交" /></form>
</body>
<script type="text/javascript">var hobby = document.getElementById("hobby");var star = document.getElementById("star");var volleyball = document.getElementById("volleyball");var wj = document.getElementById("wj");hobby.onclick = function(){hobby.replaceChild(wj,volleyball);};
</script>
</html>

getAttribute
getAttribute获取标签中的属性，除了使用对象名.属性名的方式来获取属性之外还可以使用getAttribute()方法来获取指定的属性值。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getAttribute</title>
</head>
<body><form name="baseInfo" action="#" method="post">姓名：<input type="text"  id="name"><br>密码：<input type="password"  id="pwd" ><br><input type="button" id="btn" name="submit" value="提交" /></form>
</body>
<script type="text/javascript">var username = document.getElementById("name");var nameType = username.getAttribute("type");alert(nameType);
</script>
</html>

setAttribute
setAttribute给对象添加属性，如下代码，3秒后给div添加style属性将字体设置为红色：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>setAttribute</title>
</head>
<body><div id="d1">好好学习javascript</div>
</body>
<script type="text/javascript">var d1 = document.getElementById("d1");setTimeout(function(){d1.setAttribute("style","color:red");},3000);
</script>
</html>
createElement
createElement可以创建一个标签，createTextNode向标签中添加文本，如下代码，向下拉框中添加一个选项：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>createElement</title>
</head>
<body><form name="baseInfo" action="#" method="post"><select name="hobby" id="hobby"><option value="basketball">篮球</option><option value="football">足球</option><option value="volleyball">排球</option></select></form>
</body>
<script type="text/javascript">/*在下拉框中增加一个跑步的选项*///创建option标签var optionNew = document.createElement("option");//添加属性optionNew.setAttribute("value","run");//添加文本var txt = document.createTextNode("跑步");optionNew.appendChild(txt);//将标签加入到select中var hobby = document.getElementById("hobby");hobby.appendChild(optionNew);
</script>
</html>
insertBefore
insertBefore在指定位置之前插入标签。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>insertBefore</title>
</head>
<body><form name="baseInfo" action="#" method="post"><select name="hobby" id="hobby"><option value="basketball">篮球</option><option id="football" value="football">足球</option><option value="volleyball">排球</option></select></form>
</body>
<script type="text/javascript">var optionNew = document.createElement("option");//添加属性optionNew.setAttribute("value","run");//添加文本var txt = document.createTextNode("跑步");optionNew.appendChild(txt);//将标签加入到select中var hobby = document.getElementById("hobby");var football = document.getElementById("football");hobby.insertBefore(optionNew,football);//hobby.insertBefore(optionNew,hobby.options[2]);
</script>
</html>

removeChild
removeChild删除指定元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>removeChild</title>
</head>
<body><form name="baseInfo" action="#" method="post"><select name="hobby" id="hobby"><option value="basketball">篮球</option><option id="football" value="football">足球</option><option id="volleyball" value="volleyball">排球</option></select></form>
</body>
<script type="text/javascript">var hobby = document.getElementById("hobby");var volleyball = document.getElementById("volleyball");hobby.removeChild(volleyball);
</script>
</html>

innerHTML
大部分浏览器中都支持innerHTML，但是他不是DOM标准的组成部分。可以使用innerHTML获取对象的内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>innerHTML</title>
</head>
<body><table><tr id="tr1"><td id="td1">数学</td><td id="td2">语文</td></tr></table><div id="d1">好好学习java</div>
</body>
<script type="text/javascript">var t = document.getElementById("tr1");alert(t.innerHTML);setTimeout(function() {var d1 = document.getElementById("d1");d1.innerHTML = "我想打篮球";}, 3000);
</script>
</html>

javascript之DOM简介相关推荐

前端：JS/27/HTML DOM简介和新特性，HTML DOM访问HTML元素的方法，元素对象的属性（标准属性），noscroll事件，实例：书讯快递
HTML DOM简介和新特性 1,HTML DOM简介核心DOM中,提供的属性和方法,已经可以操作网页了,为什么还要HTML DOM? 如果在核心DOM中,网页中节点层级很深时,访问这个节点时将十分 ...
前端：JS/24/BOM和DOM简介，for...in循环遍历，window对象的属性和方法，延时器，定时器，screen屏幕对象，location地址栏对象，history历史记录对象
BOM 和DOM简介 BOM ,Browser Object Model ,浏览器对象模型: BOM主要提供了访问和操作浏览器各组件的方式: 浏览器组件:window(浏览器容器), location ...
JavaScript事件冒泡简介及应用
JavaScript事件冒泡简介及应用一.什么是事件冒泡在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件 ...
JavaScript的DOM知识点总结
目录 1.DOM重点核心 2.DOM事件流 3.DOM知识点总结 4.常见案例视频资料,pink老师讲的超级详细,JavaScript的DOM操作:黑马程序员JavaScript核心教程,前端基础教 ...
JavaScript之DOM学习笔记
目录 1.DOM简介 1.1.什么是DOM 2.获取元素 2.1.如何获取页面元素 2.2.根据ID获取 2.3.根据标签名获取 2.4.通过H5新增方法获取 3.事件基础 3.1.事件概述 3.2. ...
JavaScript核心 DOM 和 BOM操作
JavaScript核心 DOM 和 BOM操作 Web APIs 简介 1. Web APIs 和 JS 基础关联性 1.1 JS 的组成 1.2 JS 基础阶段以及 Web APIs 阶段 JS ...
JavaScript 操作DOM对象
1)JavaScript 操作DOM對象 1.DOM:是Document Object Model 的缩写,及文档对象模型 2.DOM通常分为三类:DOM Core(核心).HTML-DOM 和 ...
计算机高级程序开发,2017计算机javascript高级程序设计简介
2017计算机javascript高级程序设计简介在JavaScript面世之初,没有人会想到它会被应用的如此广泛,也远比一般人想象中的要复杂强大的多.下面小编整理的关于计算机javascript高 ...
深入理解JavaScript系列（23）：JavaScript与DOM（上）——也适用于新手
文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API. Javascript和 ...

javascript之DOM简介

javascript之DOM简介相关推荐

最新文章

热门文章