①、创建一个元素节点:

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 Design Log Storage System

    原题链接在这里:https://leetcode.com/problems/design-log-storage-system/description/ 题目: You are given sever ...

  2. 转载FPGA学习之内嵌乘法器调用

    补充一点,除法的时候如果直接a/b那么就会调用lpm模块,不管输入是否是常数,乘法的时候输入都是reg型变量会调用硬件乘法器,有一个是常数就会调用lpm模块. 上课的时候一直听老师说真正实践的时候你别 ...

  3. LG3391 【模板】文艺平衡树（Splay）

    题意 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:翻转一个区间,例如原有序序列是5 4 3 2 1,翻转区间是[2,4]的话,结果是5 2 3 4 1 \(n,m ...

  4. 布局类，让多个div在一行显示

    原文链接:http://www.divcss5.com/wenji/w472.shtml

  5. Oracle数据文件和临时文件的管理

    一.数据文件概述在Oracle数据库中,SYSTEM和SYSAUX表空间至少需要包含一个数据文件,此外还将包含多个其他表空间及与其相关的数据文件和临时文件.Oracle的数据文件和临时文件是操作系统文 ...

  6. 相对路径和绝对路径的区别,java获取项目访问路径的方法

    相对路径和绝对路径的区别 在HTML里只要涉及文件的地方(如超级链接.图片等)就会涉及绝对路径与相对路径的概念. .绝对路径 绝对路径是指文件在硬盘上真正存在的路径.例如“bg.jpg”这个图片是存放 ...

  7. 【转】使用JMeter 完成常用的压力测试（三）

    使用JMeter 完成常用的压力测试 发布时间: 2008-9-27 15:33    作者: 未知    来源: 网络转载 字体:  小  中  大  | 上一篇 下一篇 | 打印  | 我要投稿 ...

  8. Vue.js：起步

    ylbtech-Vue.js:起步 1.返回顶部 1. Vue.js 起步 每个 Vue 应用都需要通过实例化 Vue 来实现. 语法格式如下: var vm = new Vue({ // 选项 }) ...

  9. Oracle 分区表-Range分区

    原文:http://www.tuicool.com/articles/MzeM7r 一.什么是分区表 Oracle提供了分区技术以支持VLDB(Very Large DataBase).分区表通过对分 ...

  10. Linux 命令初识

    Alt+Ctrl+F[1~6]:切换虚拟终端 如果要切换到第 2 号虚拟终端的话,按 Alt+Ctrl+F2 要切换回去的话,按 Alt+Ctrl+F1 #:为 root 用户的系统提示符 $:为普通 ...