①、创建一个元素节点:

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. Linux 环境下安装Maven

    1.安装wget命令 如果需要通过使用wget命令,直接通过网络下载maven安装包时,需要在linux系统中安装wget命令. yum -y install wget 2.下载maven安装包 wg ...

  2. bzoj 1499 [NOI2005]瑰丽华尔兹——单调队列优化dp

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1499 简单的单调队列优化dp.(然而当时却WA得不行.今天总算填了坑) 注意滚动数组赋初值应 ...

  3. 17.Selenium+Python日期控件小案例

    1.web上的控件种类十分多,但是大致分为2种,一种为类型是input的且可以输入,第二种为类型是input的且属性为readonly,文本框不可编辑 2.第一种类型为可以输入的,直接send_key ...

  4. 使用spring框架的JdbcTemplate实现对Oracle数据库的简单操作实例

    最近实现了一个小功能,针对Oracle数据库两张关联表进行查询和修改,因为比较简单,所以选择了spring框架里的JdbcTemplate.JdbcTemplate算是老古董了,是当年spring为了 ...

  5. 关于yii2 REST api 的问题

    首先,需要在basic/web/文件夹下添加一个.htaccess文件 这样进入项目就会自动访问index.php文件,url就不会错乱了 <IfModule mod_rewrite.c> ...

  6. mysql + keepalived架构

    mysql + keepalived架构 文档(这个文章共有三篇): http://blog.itpub.net/27000195/viewspace-1364706/

  7. Win7旗舰版一直显示检查更新的问题

    最近部门机器从新安装win7 64位 旗舰版之后,每次检查更新,都会一直卡在检查更新的界面过不去,上网搜了一下,看到了网友提供的解决办法, 测试了一下,果然可以.记录下来,以备后用: 到微软官网去下载 ...

  8. tomcat 并发配置优化

    修改tomcat/conf/server.xml配置文件. <Executor name="tomcatThreadPool" namePrefix="catali ...

  9. mysql实战优化之八：关联查询优化

    1. 多表连接类型 1. 笛卡尔积(交叉连接) 在MySQL中可以为CROSS JOIN或者省略CROSS即JOIN,或者使用','  如: 由于其返回的结果为被连接的两个数据表的乘积,因此当有WHE ...

  10. 获取access_token错误 40164

    没有添加IP白名单