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 相关文章推荐
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
javascript suggest效果 自动完成实现代码分享
Feb 17 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
Javascript实现单张图片浏览
Dec 18 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
javascript实现校验文件上传控件实例
Apr 20 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
JSP基于Bootstrap分页显示实例解析
Jun 12 Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 Javascript
浅谈vue引用静态资源需要注意的事项
Sep 28 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实现维护文件代码
2007/06/14 PHP
php array_merge下进行数组合并的代码
2008/07/22 PHP
php中各种定义变量的方法小结
2017/10/18 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
基于JavaScript实现弹幕特效
2020/08/27 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
python3处理含有中文的url方法
2018/05/10 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
大一期末自我鉴定
2013/12/13 职场文书
4s店总经理岗位职责
2013/12/31 职场文书
毕业晚会主持词
2014/03/24 职场文书
家长对孩子的评语
2014/04/18 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
房产公证书
2015/01/23 职场文书
送给客户微信问候语!
2019/07/04 职场文书
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android