1.什么是DOM？

DOM又称文档对象模型( DOM, Document Object Model )主要用于对HTML和XML文档的内容进行操作。DOM描绘了一个层次化的节点树，通过对节点进行操作，实现对文档内容的添加、删除、修改、查找等功能。

2.什么是DOM树？

DOM树有两种，分别为节点树和元素树。

节点树：把文档中所有的内容都看成树上的节点；

元素树：仅把文档中的所有标签看成树上的节点。

3.DOM常用操作

1.查找节点

document.getElementById('id属性值');

返回拥有指定id的第一个对象的引用

document/element.getElementsByClassName('class属性值');

返回拥有指定class的对象集合

document/element.getElementsByTagName('标签名');

返回拥有指定标签名的对象集合

document.getElementsByName('name属性值');

返回拥有指定名称的对象结合

document/element.querySelector('CSS选择器');

仅返回第一个匹配的元素

document/element.querySelectorAll('CSS选择器');

返回所有匹配的元素

document.documentElement

获取页面中的HTML标签

document.body

获取页面中的BODY标签

document.all['']

 获取页面中的所有元素节点的对象集合型

2.新建节点

document.createElement('元素名');

创建新的元素节点

document.createAttribute('属性名');

创建新的属性节点

document.createTextNode('文本内容');

创建新的文本节点

document.createComment('注释节点');

创建新的注释节点

document.createDocumentFragment( );

创建文档片段节点

3.添加新节点           注（添加新节点和新建节点不同，新建的节点如果不添加到DOM中，是不会有任何效果的）

parent.appendChild( element/txt/comment/fragment );

向父节点的最后一个子节点后追加新节点

parent.insertBefore( newChild, existingChild );

向父节点的某个特定子节点之前插入新节点

element.setAttributeNode( attributeName );

给元素增加属性节点

element.setAttribute( attributeName, attributeValue );

给元素增加指定属性，并设定属性值

4.删除节点

parentNode.removeChild( existingChild );

 删除已有的子节点，返回值为删除节点

element.removeAttribute('属性名');

 删除具有指定属性名称的属性，无返回值

element.removeAttributeNode( attrNode );

 删除指定属性，返回值为删除的属性 

5.修改节点

parentNode.replaceChild( newChild, existingChild );

 用新节点替换父节点中已有的子节点
element.setAttributeNode( attributeName ); 若原元素已有该节点，此操作能达到修改该属性值的目的
element.setAttribute( attributeName, attributeValue ); 若原元素已有该节点，此操作能达到修改该属性值的目的

不多说了，直接上代码

<!DOCTYPE html>

  <html lang="en">

  <head>

      <meta charset="UTF-8">

      <title>Document</title>

  </head>

  <body>

  <h2>创建文本节点</h2>

  <button onclick="addText()">创建文本节点</button>

  <p></p>

  <script>

     function addText(){

	      //创建文本节点

	      var a=document.createTextNode('this is a 文本');	//创建文本节点

	      document.getElementsByTagName('p')[0].appendChild(a);//添加文本节点

		  document.getElementsByTagName('button')[0].innerHTML='你看我变了没？';//新增文本内容

		  var b=document.createAttribute('id');   //创建一个属性节点         也可以在创建时给他赋值

		  b.value='123';                  //给这个属性节点赋值

		  document.getElementsByTagName('p')[0].setAttributeNode(b);   //给p元素设置新的属性

		  document.getElementsByTagName('button')[0].setAttribute('id','buttonId');   //给button元素设置id属性

		  //创建新元素

		  var c=document.createElement('div');         //创建一个新元素div

		  var cul=document.createElement('ul');             //创建一个新元素 ul

		  var culli=document.createElement('li');             //创建一个新元素  li

		  culli.innerHTML='6';                                   //  新增文本内容

		  c.appendChild(cul).appendChild(culli);              //添加子节点

		  document.body.appendChild(c);                 //往body中添加子节点

		  //等同于：

                  //var d="<ul><li>6</li>";        //字符串

                  //c.append(d);		            //jquery  append方法

		  //document.body.appendChild(c); 

	 }

  </script>

 </body>

 </html>

　　

常见的Dom操作的更多相关文章

  1. JavaScript常见原生DOM操作API总结

    [TOC] 最近面试的时候被这个问题给卡了,所以抽时间好好复习一下. 几种对象 Node Node是一个接口,中文叫节点,很多类型的DOM元素都是继承于它,都共享着相同的基本属性和方法.常见的Node ...

  2. JS中常见原生DOM操作API

    摘自:https://blog.csdn.net/hj7jay/article/details/53389522 几种对象 Node Node是一个接口,中文叫节点,很多类型的DOM元素都是继承于它, ...

  3. 常见的dom操作----原生JavaScript与jQuery

    1.创建元素 文本节点 JavaScript: document.createElement(),只接收一个参数,创建后需要手动将其添加到文档树中,例如: var newDiv = document. ...

  4. 前端页面卡顿？或是DOM操作惹的祸，需优化代码

    文档对象模型(DOM)是一个独立 于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得 DOM成为了JavaSc ...

  5. DOM操作优化

    文档对象模型(DOM)是一个独立 于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得 DOM成为了JavaSc ...

  6. 解析XML文件的几种常见操作方法—DOM/SAX/DOM4j

    解析XML文件的几种常见操作方法—DOM/SAX/DOM4j 一直想学点什么东西,有些浮躁,努力使自己静下心来看点东西,哪怕是回顾一下知识.看到了xml解析,目前我还没用到过.但多了解一下,加深点记忆 ...

  7. DOM操作 append prependTo after before

    通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况:如果我们通过AJAX获取到数 ...

  8. JQuery基础DOM操作

    DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况:如 ...

  9. DOM操作--表格点击行变色

    点击表格行变色,这种网页效果应该还是比较常见的.大家应该看见了,我这里的效果是用DOM操作实现的,那么很多人会问什么是DOM操作,贴出代码之前我就和大家解释一下什么是DOM操作: DOM是Docume ...

随机推荐

  1. Android 自定义ListView滚动条样式

    使用ListView FastScroller,默认滑块和自定义滑块图片的样子: 设置快速滚动属性很容易,只需在布局的xml文件里设置属性即可: <ListView android:id=&qu ...

  2. Recsys2018 music recomendation

    http://www.recsyschallenge.com/2018/ January 2018 Release of the "One Million Playlists" d ...

  3. 关于 document.compatMode

    今天查资料时无意发现一个以前没有注意到过的属性:document.compatMode 经过一番资料的查询后,了解到以下信息: 我们都知道IE有两种盒子模型,在不声明 !DOCTYPE 时是混杂模式 ...

  4. 视频监控——从其他浏览器打开低版本IE方案

    1. 方案背景 由于低版本IE浏览器并不支持很多新的页面技术,导致部分页面效果难以实现;另一方面IE浏览器版本与操作系统绑定,难以统一,不同版本IE间的不兼容导致多种兼容性问题,因此本项目暂定采用Ch ...

  5. 初涉node.js做微信测试公众号一路填坑顺便发现个有趣的其他漏洞

    [微信测试公众号] 半年前耍着玩搭起来的“微信简历”,是LAMP版的,很皮毛. 微信的官方文档在这 http://mp.weixin.qq.com/wiki/index.php 1.获取access ...

  6. 修改CPAN安装源

    更新CPAN镜像源的方法,以CentOS 6.5为例. 存储CPAN设置信息的文件路径为: /usr/share/perl/CPAN/Config.pm 使用vi打开文件 vi /usr/share/ ...

  7. 20150103 海南铁汉vs哈尔滨毅腾

    本文首发于『懂球帝』 这一场球赛虽然极其普通,在各位懂球帝面前或许不值得一提,但它极具历史意义,因为这是海南第一个职业联赛队伍的首场正式比赛,同时也是海南铁汉队第一次在正式比赛中与球迷们见面. 稍做一 ...

  8. (转)Wireshark基本介绍和学习TCP三次握手

    原地址https://www.cnblogs.com/TankXiao/archive/2012/10/10/2711777.html#filter 阅读目录 wireshark介绍 wireshar ...

  9. 03_P52 课后作业

    1. 软件开发的早期阶段为什么进行可行性研究?应该从哪些方面研究系统的可行性? 1.进行可行性研究是为了该软件项目是否值得开发?是否具有经济效益?是否违反法律道德?是否技术可以实现?是否风险性高? 2 ...

  10. Echarts横坐标倾斜,顶部显示数字

    最近项目使用到Echarts,所以学习了下 根据API,实现Echarts很简单,在这就不多说了,下面就说说项目中碰到的一些需求 1.由于横坐标很多,导致数据不能展示完整,所以需要设置横坐标样式倾斜展 ...