JavaScript DOM元素常见操作详解【添加、删除、修改等】


Posted in Javascript onMay 09, 2018

本文实例讲述了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对象仅支持getElementsByTagNamegetElementsByClassName

修改元素

(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 相关文章推荐
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
js检测输入内容全为空格的方法
May 03 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
javascript异步处理工作机制详解
Apr 13 Javascript
JS版微信6.0分享接口用法分析
Oct 13 Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 Javascript
JavaScript嵌入百度地图API的最详细方法
Apr 16 Javascript
Vue中使用vee-validate表单验证的方法
May 09 #Javascript
VeeValidate在vue项目里表单校验应用案例
May 09 #Javascript
vue实现2048小游戏功能思路详解
May 09 #Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 #Javascript
vue中的provide/inject的学习使用
May 09 #Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 #Javascript
自定义vue组件发布到npm的方法
May 09 #Javascript
You might like
php 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
解析wamp5下虚拟机配置文档
2013/06/27 PHP
浅析php数据类型转换
2014/01/09 PHP
php计划任务之ignore_user_abort函数实现方法
2015/01/08 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
php通过执行CutyCapt命令实现网页截图的方法
2016/09/30 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
jquery 实现回车登录详解及实例代码
2016/10/23 Javascript
babel基本使用详解
2017/02/17 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
2018/05/16 jQuery
Python实现LRU算法的2种方法
2015/06/24 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
python字典与json转换的方法总结
2020/12/28 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
小学生综合素质评语
2014/04/23 职场文书
主题党日活动总结
2014/07/08 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
学习计划是什么
2019/04/30 职场文书
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技