①、创建一个元素节点:

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. LeetCode 616. Add Bold Tag in String

    原题链接在这里:https://leetcode.com/problems/add-bold-tag-in-string/description/ 题目: Given a string s and a ...

  2. FIR滤波器的FPGA实现方法

    FIR滤波器的FPGA实现方法 2011-02-21 23:34:15   来源:互联网    非常重要的基本单元.近年来,由于FPGA具有高速度.高集成度和高可靠性的特点而得到快速发展.随着现代数字 ...

  3. phpstorm2017.3.6的激活、样式设置和汉化

    一:安装phpstorm2017.3.6,并激活.设置样式.(1)先在phstorm官网里www.jetbrains.com下载phpstorm2017.3.6,按照步骤安装即可.下面开始激活!(2) ...

  4. fn project 打包Function

      Option 1 (recommended): Use the fn cli tool We recommend using the fn cli tool which will handle a ...

  5. 基于jwt和角色的访问控制方案-从0开始

    上一版本的构想:http://www.cnblogs.com/vhyc/p/7953779.html 缺陷:dubbo的filter里面不能注入mapper的bean,而且每次查询都访问数据库速度影响 ...

  6. 安装用于跨平台移动开发的 Visual C++

    安装用于跨平台移动开发的 Visual C++ Visual Studio 2015   若要了解有关 Visual Studio 2017 RC 的最新文档,请参阅 Visual Studio 20 ...

  7. 今天去python官网下载包安装的时候的问题记录

    去官网下载了 tar压缩包 放到了site-packages下解压 然后使用 python setup.py install 安装 安装完后,所要引用的模块文件居然还在解压出来的压缩文件里面,导致无法 ...

  8. 分布式锁之三：Redlock实现分布式锁

    之前写过一篇文章<如何在springcloud分布式系统中实现分布式锁?>,由于自己仅仅是阅读了相关的书籍,和查阅了相关的资料,就认为那样的是可行的.那篇文章实现的大概思路是用setNx命 ...

  9. 2017中国大学生程序设计竞赛 - 女生专场 Happy Necklace（递推+矩阵快速幂）

    Happy Necklace Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) ...

  10. 为何指针初始化为NULL

    指针初始化为NULL,指向NULL指针区(大小64K),如果读取或写入这个地址,会引发内存写保护异常 版权声明:本文为博主原创文章,未经博主允许不得转载.