本文实例讲述了 JavaScript DOM 元素常见操作. 分享给大家供大家参考, 具体如下:
DOM 概念
DOM(Document Object Model): 文档对象模型.
通过开发者工具的 Elements 标签页可以查看
通过开发者工具的 Sources 标签页也可以观察到整个文档是有一系列节点
整个文档是由一系列节点对象组成的一棵树.
节点 (Node) 包括元素节点(1), 属性节点(2), 文本节点(3)(1..2..3.. 代表节点类型)_
- var th1= document.getElementById("th1");
- alert(th1.nodeType);
- alert(th1.nodeName);
- alert(th1.nodeValue);
th1 代表一个元素节点(nodeType=1),nodeName 就是标签名(th), 元素节点的 nodeValue=null.
- var attr1=th1.getAttributeNode("name");
- alert(attr1.nodeType);
- alert(attr1.nodeName);
- alert(attr1.nodeValue);
getAttributeNode 方法是获取元素的属性节点, 此时输出的节点类型为属性节点(2), 节点名称就是属性名(name), 节点值就是属性值(sex)
- var txtl = th1.firstChild;
- alert(txtl.nodeType);
- alert(txtl.nodeName);
- alert(txtl.nodeValue)
txt1 是一个文本节点(3), 节点名称固定就是 #text, 节点值就是文本内容.
获取元素
(1)getElementByid
根据元素的 id 属性来获取元素, 获取到的是一个元素.
(2)getElementsByTagName
根据标签名来获取元素, 结果是一个元素集合.
(3)getElementsByClassName
根据 class 属性来获取元素, 结果是一个元素集合.
(4)getElementsByName
根据 name 属性来获取元素, 结果是一个元素集合.
总结: 获取元素可以根据标签名获取, 也可以根据 id,name,class 属性来获取. 根据 id 属性获取的结果是一个元素, 而其它的获取的是一个集合.
document 对象支持以上四种, 而 element 对象仅支持
getElementsByTagName
和
- getElementsByClassName
- .
修改元素
(1)修改内容
- function fun(){
- // 获取到指定元素
- var p1 = document.getElementById("p1");
- p1.innerText = "我被单击了!";
- }
通过. innerText 属性可读取或设置标签的内容文本
- function fun(){
- // 获取到指定元素
- var p1 = document.getElementById("p1");
- p1.innerhtml = "我被单击了!<br > 换行了";
- }
也可以通过 innerHTML 属性获取或设置内容文本
俩者的区别: innerHTML 会按照 HTML 规则解析文本, 而 innerText 只是当做普通文本内容.
(1) 修改样式
A.xxx.style. 属性名 ="值"
B.xxx.classname="..."(相当于修改了 class 的属性)
- <style>
- .style1{
- color:red;
- font-size:20px;
- text-decoration:underline;
- }
- .style2{
- color:blue;
- font-size:32px;
- text-decoration:line-through;
- }
- </style>
- </head>
- <body>
- <p id="p1">修改样式测试</p>
- <input type="button"value="样式一"onclick="style1()">
- <input type="button"value="样式二"onclick="style2()">
- </body>
- <script>
- var p1 = document.getElementById("p1");
- function style1(){
- p1.className = "style1"
- }
- function style2(){
- p1.className = "style2"
- }
- </script>
- </html>
添加删除元素
(1)CreateElement 建一个元素节点
CreateElement("p")创建一个段落
(2)createTextNode 创建一个文本节点
createTextNode("文本内容")
, 创建一个值为 "文本内容" 的文本节点.
(3)appendChild 添加子节点
(4)removeChild 删除子节点
动态添加
- <body>
- <div id="div1">
- </div>
- <input type="button"value="添加段落"onclick="add()">
- </body>
- <script>
- // 全局变量
- var index = 1;
- function add(){
- // 创建一个段落标签
- var p = document.createElement("p");
- // 创建文本节点
- var content= "第"+index+"段落";
- var txt = document.createTextNode(content);
- // 创建文本节点添加的段落
- p.appendChild(txt);
- // 将段落添加到 div 中
- var div1 = document.getElementById("div1");
- div1.appendChild(p);
- index++
- }
- </script>
动态删除
- <body>
- <div id="div1">
- <p id="p1">第 1 段落 </p>
- <p id="p2">第 2 段落 </p>
- <p id="p3">第 3 段落 </p>
- <p id="p4">第 4 段落 </p>
- </div>
- <input type="button"value="删除第二段"onclick="del()">
- </body>
- <script>
- function del(){
- // 先找到父节点
- var div1 = document.getElementById("div1");
- // 再找到要删除的节点
- var p2 = document.getElementById("p2");
- // 将要删除的节点从父节点中移除
- div1.removeChild(p2);
- }
- </script>
- </html>
这种方法是分别找到父节点和要删除的节点, 然后执行删除操作. 该方法的一个前提是知道父节点是谁
那么如果并不知道父节点是谁, 该如何删除呢
p2.parentNode.removeChild(p2);
这个方法并不需要父节点是谁
动态的添加和删除:
动态添加和动态删除, 删除动态添加的奇数段落
思路 1: 获取 div1 下的所以段落, 遍历所以的段落, 将序号为奇数的段落删除.
- function del(){
- var div1 = document.getElementById("div1");
- var paras = div1.getElementsByTagName("p");
- for(var i in paras){
- if((i+1)%2 == 1){
- div1.removeChild(paras[i]);
- }
- }
- }
这种在初始时是可以的, 但是随着动态添加或删除的进行, 后面的结果就不对了. 因为动态删除操作就影响了原来的顺序, 而程序是按照序号去判断奇偶性, 所以出现误判
思路 2: 添加通过设置 class 属性, 然后通过 getElementsByclassName 来获取奇数行
- (也可以从后往前删)
- <body>
- <div id="div1">
- </div>
- <input type="button" value="添加段落" onclick="add()">
- <input type="button" value="删除奇数第二段" onclick="de1()">
- </body>
- <script>
- var index = 1;
- function add(){
- // 创建一个段落标签
- var p = document.createElement("p");
- // 创建文本节点
- var content = "第" + index + "段落";
- var txt = document.createTextNode(content);
- // 将文本节点添加到段落
- p.appendChild(txt);
- if (index % 2 == 1) {
- p.setAttribute("class","odd");
- }
- // 将段落添加到 div 中
- var div1 = document.getElementById("div1");
- div1.appendChild(p);
- index++;
- }
- /*function de1(){
- var div1 = document.getElementById("div1");
- var paras =div1.getElementsByTagName("p");
- for(var i in paras){
- if((i+1)%2 == 1){
- div1.removeChild(paras[i]);
- }
- }
- }*/
- functionde1() {
- var div1 = document.getElementById("div1");
- var paras = div1.getElementsByClassName("odd");
- // varparas = document.getElementsByName("odd");
- for (var i = paras.length - 1; i>= 0; i--) {
- div1.removeChild(paras[i]);
- }
- }
- </script>
- </html>
导航
Document: 是根节点
ParentNode: 获取父节点
childNodes: 获取所有子节点
firstChild: 第一个子节点
lastChlid: 获取最后一个子节点
- </head>
- <body>
- <div name="第一章">
- <p id="p1">第一段 < span > 第一句</span><span > 第二句</span></p>
- </div>
- <input type="button"value="获取父节点的 name 属性"onclick="fun1()">
- <input type="button"value="显示 p1 子节点的个数"onclick="fun2()">
- <input type="button"value="显示 p1 第一个子节点的类型"onclick="fun3()">
- <input type="button"value="显示 p1 最后一个子节点的类型"onclick="fun4()">
- </body>
- <script>
- var p1 =document.getElementById("p1");
- function fun1(){
- var value=p1.parentNode.getAttribute("name");
- alert(value);
- }
- function fun2(){
- var chlids = p1.childNodes;
- alert(chlids.length)
- }
- function fun3(){
- alert(p1.firstChild.nodeType);
- }
- function fun4(){
- alert(p1.lastChild.nodeType);
- }
- </script>
- </html>
更多关于 JavaScript 相关内容感兴趣的读者可查看本站专题:JavaScript 操作 DOM 技巧总结,JavaScript 错误与调试技巧总结,JavaScript 数据结构与算法技巧总结,JavaScript 遍历算法与技巧总结及JavaScript 数学运算用法总结
来源: http://www.jb51.net/article/139781.htm