①、创建一个元素节点:

var reference = document.createElement(element)
  • createElement(): 按照给定的标签名创建一个新的元素节点.
  • 方法只有一个参数：被创建的元素节点的名字, 是一个字符串.
  • 方法的返回值：是一个指向新建节点的引用指针. 返回值是一个元素节点, 所以它的 nodeType 属性值等于 1.
  • 新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象.

②、创建一个文本节点:

var reference = document.createTextNode(text);
  • createTextNode(): 创建一个包含着给定文本的新文本节点.
  • 返回值是一个指向新建文本节点引用指针. 它是一个文本节点, 所以它的 nodeType 属性等于 3.
  • 方法只有一个参数：新建文本节点所包含的文本字符串. 新元素节点不会自动添加到文档里.

③、为元素节点添加子节点:

var reference = element.appendChild(newChild)
  • appendChild(): 给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点.
  • 方法的返回值是一个指向新增子节点的引用指
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>Untitled Document</title>

        <script type="text/javascript">

            //新创建一个元素节点, 并把该节点添加为文档中指定节点的子节点

            window.onload = function(){

                //1. document.createElement(elementTagName)

                //新创建一个元素节点, 返回值为指向元素节点的引用

                //<li></li>

                var liNode = document.createElement("li");

                //2. 创建 "厦门" 的文本节点

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

                //参数为文本值, 返回该文本节点的引用.

                var xmText = document.createTextNode("厦门");

                //<li>厦门</li>

                liNode.appendChild(xmText);

                var cityNode = document.getElementById("city");

                //2. elementNode.appendChild(newChild): 为 elementNode

                //新添加 newChild 子节点, 该子节点将作为 elementNode 的最后

                //一个子节点.

                cityNode.appendChild(liNode);

            }

        </script>

    </head>

    <body>

        <p>你喜欢哪个城市?</p>

        <ul id="city"><li id="bj" name="BeiJing">北京</li>

            <li>上海</li>

            <li>东京</li>

            <li>首尔</li>

        </ul>

        <br><br>

        <p>你喜欢哪款单机游戏?</p>

        <ul id="game">

            <li id="rl">红警</li>

            <li>实况</li>

            <li>极品飞车</li>

            <li>魔兽</li>

        </ul>

        <br><br>

        gender:

            <input type="radio" name="gender" value="male"/>Male

            <input type="radio" name="gender" value="female"/>Female

    </body>

</html>

④、节点的替换:

var reference = element.replaceChild(newChild,oldChild);
  • replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点
  • 返回值是一个指向已被替换的那个子节点的引用指针
  • 该节点除了替换功能以外还有移动的功能.
  • 该方法只能完成单向替换, 若需要使用双向替换, 需要自定义函数
/**

     * 互换 aNode 和 bNode

     * @param {Object} aNode

     * @param {Object} bNode

     */

    function replaceEach(aNode, bNode){

        if(aNode == bNode){

            return;

        }

        var aParentNode = aNode.parentNode;

        //若 aNode 有父节点

        if(aParentNode){

            var bParentNode = bNode.parentNode;

            //若 bNode 有父节点

            if(bParentNode){

                var tempNode = aNode.cloneNode(true);

                bParentNode.replaceChild(tempNode, bNode);

                aParentNode.replaceChild(bNode, aNode);

            }

        }

    }

⑤、删除节点:

var reference = element.removeChild(node);
  • removeChild(): 从一个给定元素里删除一个子节点
  • 返回值是一个指向已被删除的子节点的引用指针.
  • 某个节点被 removeChild() 方法删除时, 这个节点所包含的所有子节点将同时被删除.
  • 如果想删除某个节点, 但不知道它的父节点是哪一个, 可以使用parentNode 属性
var bjNode = document.getElementById("bj");

bjNode.parentNode.removeChild(bjNode);

⑥、插入节点:

var reference = element.insertBefore(newNode,targetNode);
  •  insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
  • 节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面.
  • 节点 targetNode 必须是 element 元素的一个子节点。
  • 插入的同时有移动功能

⑦、 innerHTML属性

innerHTML 属性可以用来读,、写某给定元素里的 HTML 内容

⑧、其他属性

  • firstChild：该属性返回一个给定元素节
  • lastChild：对应 firstChild 的一个属性
  • nextSibling: 返回一个给定节点的下一个子节点
  • previousSibling：返回一个给定节点的上一个子节
  • parentNode：返回一个给定节点的父节点。

注意：parentNode 属性返回的节点永远是一个元素节点，因为只有元素节点才有可能包含子节点。document 节点的没有父节点。

JavaScript——Dom编程（2）的更多相关文章

  1. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  2. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

  3. JavaScript DOM 编程艺术（第2版）读书笔记（1）

    JavaScript 简史 JavaScript 是Netscape公司与Sun公司合作开发的.在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场.微软在推出 ...

  4. JavaScript DOM编程艺术学习笔记（一）

    嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...

  5. JavaScript DOM编程艺术第一章：JavaScript简史

    本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...

  6. 《JavaScript dom 编程艺术》 placeholder占位符IE8兼容办法。

    在<JavaScript dom 编程艺术>第11章学来的. 相对于用JavaScript替换文本框的提示语句 <!DOCTYPE html> <html lang=&q ...

  7. 《javascript dom编程艺术》笔记（一）——优雅降级、向后兼容、多个函数绑定onload函数

    刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...

  8. 《JavaScript DOM 编程艺术》

    前几天京东买了一本书,在豆瓣上好评如潮,买下了啃一啃,书名<JavaScript DOM 编程艺术>,在好好深造一下javaScript.一边啃,一边敲.当然应该要做好笔记.一些简单的就看 ...

  9. JavaScript DOM编程艺术读后感（1）—— 平稳退化

    最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发 ...

  10. Java web JavaScript DOM 编程

     JavaScript DOM 编程 (1).DOM概述及分类 (2).DOM结构模型:XML DOM 和 HTML DOM 关系? (3).结点,结点树,结点属性与方法? 1.DOM是什么? d ...

随机推荐

  1. 【JVM】JVM参数说明和分析

    不管是YGC还是Full GC,GC过程中都会对导致程序运行中中断,正确的选择不同的GC策略, 调整JVM.GC的参数,可以极大的减少由于GC工作,而导致的程序运行中断方面的问题,进而适当的提高Jav ...

  2. BZOJ3214 [Zjoi2013]丽洁体

    题意 平时的练习和考试中,我们经常会碰上这样的题:命题人给出一个例句,要我们类比着写句子.这种往往被称为仿写的题,不单单出现在小学生的考试中,也有时会出现在中考中.许多同学都喜欢做这种题,因为较其它题 ...

  3. 【ASP.NET Web API2】Digest认证

    Digest摘要认证 对于Basic认证方案来说,被传输的认证凭证仅仅采用Base64编码,所以包含密码的认证凭证基本上可以视为明文传输.Digest认证在此基础上进行了改善,在一定程度上提高了安全系 ...

  4. EL and JSTL(Jsp Standard Tag Libary)(转)

    一.什么是 EL 语言. 表达式语言(EL)是 JSP 2.0 引入的一种计算和输出 Java 对象的简单语音. 二.EL 语言的作用. 为了使JSP写起来更加简单.表达式语言的灵感来自于 ECMAS ...

  5. 连续创建多个Oracle触发器失败，单个创建才成功的解决方法

    当用到自增序列,需要用到触发器的时候,当我连续执行创建多个触发器时,总是报编译通过,但存在警告或错误. ---.应用信息 drop table app_info cascade constraints ...

  6. Java之父职场路

    Java之父——詹姆斯·高斯林出生于加拿大,是一位计算机编程天才.在卡内基·梅隆大学攻读计算机博士学位时,他编写了多处理器版本的Unix操作系统,是JAVA编程语言的创始人.1991年,在Sun公司工 ...

  7. maven搭建

    http://blog.csdn.net/zhshulin/article/details/30779873 http://blog.csdn.net/zhshulin/article/details ...

  8. JSONObject转换Int类型--java.lang.Integer cannot be cast to java.lang.String

    参数 params={"abc":0} JSONObject转换Int类型 JSONObject json = JSONObject.fromObject(params); if ...

  9. HTMLTestRunner生成报告 中文展示乱码的问题

  10. 文化之旅(dijstra)

    2012_p4 文化之旅 (culture.cpp/c/pas) 时间限制: 1 Sec  内存限制: 128 MB提交: 43  解决: 16[提交][状态][讨论版][命题人:外部导入] 题目描述 ...