话不多说直接上demo:

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

     <div class="container" id="box"><span>我是一个div元素1</span><p>hello</p></div>

     <script>

         var divNode = document.getElementsByClassName("container")[0];

 /*节点操作*/

         /*获取元素节点*/

         console.log(divNode.nodeType)        //

         console.log(divNode.nodeName)        //DIV

         console.log(divNode.nodeValue)        //null

         /*获取属性节点*/

         console.log(divNode.attributes[1].nodeName)  //id

         console.log(divNode.attributes[0].nodeValue);    //container

         console.log(divNode.attributes[0]);        //class="container"

         /*获取文本节点*/

         console.log(divNode.childNodes[0].nodeName);    //SPAN

         console.log(divNode.childNodes[0].nodeValue);    //null,如果不存在子元素，则输出文本内容

         console.log(divNode.parentNode);    //输出body标签及其子元素

         console.log("===================")

         console.log(divNode.childNodes[1].childNodes[0].nodeName);   //#text

         console.log(divNode.childNodes[1].childNodes[0].nodeValue);     //hello    /*如果div标签与span标签之间存在换行或者空格，则输出:我是一个div元素1*/

 /*元素方法操作*/

         /*添加子节点*/

         var addNode = document.createElement("div");

         var addText = document.createTextNode("guangzhou");

         addNode.appendChild(addText);

         divNode.appendChild(addNode);

         /*删除子节点*/

         var deleteNode = document.getElementsByTagName("span")[0]

         divNode.removeChild(deleteNode);

         /*替换子节点*/

         var replaceNode = divNode.getElementsByTagName("div")[0]

         var newReplace = document.createElement("span");

             newReplace.innerHTML="my name lucas";

         divNode.replaceChild(newReplace,replaceNode);

         /*插入子节点*/

         var newInsert = document.createElement("div");

             newInsert.innerHTML="insert a new div";

             divNode.insertBefore(newInsert,divNode.childNodes[0]);

 /*属性操作*/

         /*获取属性节点*/

         console.log(divNode.getAttribute("class"));        //container

         console.log(divNode.getAttributeNode("class"));    //class="container"

         /*创建和设置属性节点*/

         var addAttr = document.createAttribute("class");

         addAttr.value="newAttr";

         divNode.setAttributeNode(addAttr); //替代了旧的类

         // divNode.setAttribute("class","newAttr");/*简单写法*/

         /*删除属性*/

         var deleteAttr = divNode.getAttributeNode("class");

         divNode.removeAttributeNode(deleteAttr)

         // divNode.removeAttribute("id")    /*简单写法*/

     </script>

 </body>

 </html>

效果

DOM操作方法、属性的更多相关文章

  1. JS操作DOM元素属性和方法

    Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访 ...

  2. CSS :first-child 选择器 和 HTML DOM firstChild 属性

    CSS 选择器参考手册 实例 选择属于其父元素的首个子元素的每个 <p> 元素,并为其设置样式: p:first-child { background-color:yellow; } 亲自 ...

  3. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  4. DOM 节点属性

    DOM 节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeT ...

  5. JQuery处理DOM元素-属性操作

    JQuery处理DOM元素-属性操作 //操作元素的属性: $('*').each(function(n){ this.id = this.tagName + n; }) //获取属性值: $('') ...

  6. JavaScript DOM 元素属性 状态属性

    JavaScript DOM 元素属性 状态属性 版权声明:未经允许,严禁转载! 元素的属性 核心 DOM 为我们提供了操作元素标准属性的统一 API. 所有属性节点都储存在元素的 attribute ...

  7. （四）Jsoup 获取 DOM 元素属性值

    第一节: Jsoup 获取 DOM 元素属性值 Jsoup获取DOM元素属性值 比如我们要获取博客的href属性值: 我们这时候就要用到Jsoup来获取属性的值 : 我们给下示例代码: package ...

  8. SVG DOM常用属性和方法介绍(1)

    12.2  SVG DOM常用属性和方法介绍 将以Adobe SVG Viewer提供的属性和方法为准,因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同,有些方法和属性是某个解析 ...

  9. HTML DOM status 属性

    <!DOCTYPE html><html> <head>HTML DOM status 属性</head><body><script ...

  10. DOM对象属性(property)与HTML标签特性(attribute)

    HTML中property与attribute是极易混淆的两个概念.大多数时候这两个单词都翻译为"属性",为了区分二者,一般将property翻译为"属性",a ...

随机推荐

  1. vim命令的三种模式

    对于vim这个命令来讲是有三种模式的,分别是:正常模式,编辑模式以及命令模式.接下来就写一个demo作为演示 前期准备,先在本地准备一个文档,我这里就写了一个大家耳熟能详的例子,如下: 然后用rz命令 ...

  2. 从“HDU 2005 第几天？”谈起

    在程序设计中,日期时间的处理经常会遇到.在C语言程序设计的一些教材中会出现如下例子或习题. [例1]第几天? (HDU 2005) 给定一个日期,输出这个日期是该年的第几天. Input输入数据有多组 ...

  3. Python二元操作符

    def quiz_message(grade): outcome = 'failed' if grade<50 else 'passid' print ('grade', grade, 'out ...

  4. 微服务SpringCloud之服务网关zuul一

    前面学习了Eureka.Feign.Hystrix.Config,本篇来学习下API网关zuul.在微服务架构中,后端服务往往不直接开放给调用端,而是通过一个API网关根据请求的url,路由到相应的服 ...

  5. Springboot国际化信息（i18n）解析

    国际化信息理解 国际化信息也称为本地化信息 . Java 通过 java.util.Locale 类来表示本地化对象,它通过 “语言类型” 和 “国家/地区” 来创建一个确定的本地化对象 .举个例子吧 ...

  6. MySql（二）_NHibernateHelper管理会话工厂

    1.定义接口的好处: (1) 清楚的看到里面有哪些方法: ( 2 )  可以更换实现类:Nhibernate实现件可以更换: Manger文件夹(另外两个是Model.Mappings文件夹) 首先M ...

  7. Winform中将Bitmap对象通过picture显示图片

    场景 使用Zxing生成二维码时,返回的是Bitmap,现在要将其显示. Winform中显示照片的控件是pictureBox 实现 //二维码要存储的内容 string codeString = & ...

  8. 自己动手实现springboot配置(非)中心

    好久没写博客了,这段时间主要是各种充电,因为前面写的一些东西,可能大家不太感兴趣或者是嫌弃没啥技术含量,所以这次特意下了一番功夫.这篇博客其实我花了周末整整两天写好了第一个版本,已经开源出去了,同样是 ...

  9. 月光宝盒之时间魔法--java时间的前生今世

    月光宝盒花絮 “曾经有一份真诚的爱情摆在我的面前,但是我没有珍惜,等到了失去的时候才后悔莫及,尘世间最痛苦的事莫过于此.如果可以给我一个机会再来一次的话,我会跟那个女孩子说我爱她,如果非要把这份爱加上 ...

  10. asp.net core3.0 mvc 用 autofac

    好久没有写文章了,最近在用.net core3.0,一些开发中问题顺便记录: 1.首先nuget引入 Autofac Autofac.Extensions.DependencyInjection 2. ...