(1)创建新节点

createDocumentFragment()    //创建一个DOM片段

createElement_x_x()   //创建一个具体的元素

createTextNode()   //创建一个文本节点

(2)添加、移除、替换、插入

appendChild()

removeChild()

replaceChild()

insertBefore()

(3)查找

getElementsByTagName()    //通过标签名称

getElementsByName()    //通过元素的Name属性的值

getElementById()    //通过元素Id,唯一性

1.创建元素节点
document.createElement_x_x() 方法 用于创建元素,接受一个参数,即要创建元素的标签名,返回创建的元素节点

1 var div = document.createElement_x_x("div"); //创建一个div元素
2 div.id = "myDiv"; //设置div的id
3 div.className = "box"; //设置div的class

创建元素后还要把元素添加到文档树中

2.添加元素节点
appendChild() 方法 用于向childNodes列表的末尾添加一个节点,返回要添加的元素节点

1 var ul = document.getElementByIdx_xx_x("myList"); //获得ul
2 var li = document.createElement_x_x("li"); //创建li
3 li.innerHTML = "项目四"; //向li内添加文本
4 ul.appendChild(li); //把li 添加到ul子节点的末尾

appendChild() 方法还可以添加已经存在的元素,会将元素从原来的位置移到新的位置
1 var ul = document.getElementByIdx_xx_x("myList"); //获得ul
2 ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾

insertBefore() 方法,如果不是在末尾插入节点,而是想放在特定的位置上,用这个方法,该方法接受2个参数,第一个是要插入的节点,第二个是参照节点,返回要添加的元素节点

1 var ul = document.getElementByIdx_xx_x("myList"); //获得ul
2 var li = document.createElement_x_x("li"); //创建li
3 li.innerHTML= "项目四"; //向li内添加文本
4 ul.insertBefore(li,ul.firstChild); //把li添加到ul的第一个子节点前
 
1 var ul = document.getElementByIdx_xx_x("myList"); //获得ul
2 var li = document.createElement_x_x("li"); //创建li
3 li.innerHTML= "项目四"; //向li内添加文本
4 ul.insertBefore(li,ul.lastChild); //把li添加到ul的子节点末尾
 
1 var ul = document.getElementByIdx_xx_x("myList"); //获得ul
2 var li = document.createElement_x_x("li"); //创建li
3 li.innerHTML= "项目四"; //向li内添加文本
4 var lis = ul.getElementsByTagName_r("li") //获取ul中所有li的集合
5 ul.insertBefore(li,lis[1]);     //把li添加到ul中的第二个li节点前

添加后:

 

3.移除元素节点
removeChild() 方法,用于移除节点,接受一个参数,即要移除的节点,返回被移除的节点,注意被移除的节点仍然在文档中,不过文档中已没有其位置了

1 var ul = document.getElementByIdx_xx_x("myList"); //获得ul
2 var fromFirstChild = ul.removeChild(ul.firstChild); //移除ul第一个子节点
 
1 var ul = document.getElementByIdx_xx_x("myList"); //获得ul
2 var lis = ul.getElementsByTagName_r("li") //获取ul中所有li的集合
3 ul.removeChild(lis[0]);       //移除第一个li,与上面不同,要考虑浏览器之间的差异

4.替换元素节点
replaceChild() 方法,用于替换节点,接受两个参数,第一参数是要插入的节点,第二个是要替换的节点,返回被替换的节点

1 var ul = document.getElementByIdx_xx_x("myList"); //获得ul
2 var fromFirstChild = ul.replaceChild(ul.firstChild); //替换ul第一个子节点
 
1 var ul = document.getElementByIdx_xx_x("myList"); //获得ul;
2 var li = document.createElement_x_x("li"); //创建li
3 li.innerHTML= "项目四"; //向li内添加文本
4 var lis = ul.getElementsByTagName_r("li") //获取ul中所有li的集合
5 var returnNode = ul.replaceChild(li,lis[1]); //用创建的li替换原来的第二个li

5.复制节点
cloneNode() 方法,用于复制节点, 接受一个布尔值参数, true 表示深复制(复制节点及其所有子节点), false 表示浅复制(复制节点本身,不复制子节点)

1 var ul = document.getElementByIdx_xx_x("myList"); //获得ul
2 var deepList = ul.cloneNode(true); //深复制
3 var shallowList = ul.cloneNode(false); //浅复制

dom控制的更多相关文章

  1. DOM(七)使用DOM控制表格

    表格的css控制就先不说了,首先分享下表格常用的DOM 表格添加操作的方法常用的为insertRow()和insertCell()方法. row是从零开始计算起的,例如: var oTr = docu ...

  2. 同域之下子iframe的DOM控制问题

    new_file.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  3. SVG基础以及使用Javascript DOM操作SVG

    SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率 不支持事 ...

  4. javascript DOM document属性

    DOM控制页面中的所有元素 每个载入浏览器的HTML文档都会成为Document对象,利用它可对HTML页面中的所有元素进行访问 常用属性: title:返回或设置当前文档的标题 常用方法 write ...

  5. 也许你需要点实用的-Web前端笔试题

    之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...

  6. 前端知识杂烩(HTML[5]?+CSS篇)

    1. CSS 优先级算法如何计算?2.如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?3.用纯CSS创建一个三角形的原理是什么?4. 如何解决inline-block元素的空白间距( ...

  7. 面试题HTML +CSS

    HTML+CSS部分1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素?行内元素:和有他元素都在一行上,高度.行高及外边距和内边距都不可改变,文字图片的宽度不可改变,只能容纳文本或者其他 ...

  8. html导入css样式的方法

    在html网页中引入css样式表主要有一下四种方法 1.行内引入 <p style="width:100px;height:40px;color:red;"></ ...

  9. @import导入外部样式表与link链入外部样式表的区别

    昨天碰到同事问了一个问题,@impor导入外部样式与link链入外部样式的优先级是怎样的,为什么实验的结果是按照样式表导入后的位置来决定优先级. 今天就这个问题,度娘上找了很久,终于有个总结性的答案出 ...

随机推荐

  1. NSURLSession使用模板和AFNetworking使用模板(REST风格)

    1.NSURLSession使用模板 NSURLSession是苹果ios7后提供的api,用来替换 NSURLConnection会话指的是程序和服务器的通信对象//一.简单会话不可以配合会话(ge ...

  2. 【Luogu】P2491消防(单调队列)

    题目链接 首先可以想到路径一定是在直径上的. 然后对每个点dfs出不经过直径的以它开始的路径最大长度,记为dis 然后就可以求出直径之后枚举左右端点,设左端点l右端点r,直径上点距离直径上起点的距离用 ...

  3. Codeforces Round #363 (Div. 2) A 水

    Description There will be a launch of a new, powerful and unusual collider very soon, which located ...

  4. Gym 100971B 水&愚

    Description standard input/output Announcement   Statements A permutation of n numbers is a sequence ...

  5. c#的字典序

    //Dictionary System.Collections.DictionaryEntry dic=new System.Collections.DictionaryEntry("key ...

  6. Web表单提交之disabled问题

    例如,有如下表单 <form id="inputForm" action="shorttermrental.action" method="po ...

  7. Nginx + tomcat 实现简单集群(基于反向代理方式)

    一.安装 nginx 1. nginx依赖以下一些软件库,在安装之前请确保安装了这些软件库,它们包括:gcc,openssl,zlib,pcre(可通过rpm -q命令查询是否已安装) 可通过命令 r ...

  8. live-server 快速搭建静态服务

    作为切图仔呢,平时都是在修改页面样式.展示后台返回的数据.调试js效果,这时候呢就需要搭一个服务器以便我们调试.平时我一般用的都是wamp,在www目录下新建项目然后开始撸代码,不过有时候呢不太方便, ...

  9. Bzoj2882 工艺 [线性算法]

    后缀自动机题解 -> http://www.cnblogs.com/SilverNebula/p/6420601.html 后缀自动机敲完,看了下排行,wc为什么别人跑得这么快?……是诶,这最小 ...

  10. [LeetCode] Rotate List 单项链表旋转

    Given a list, rotate the list to the right by k places, where k is non-negative. For example:Given 1 ...