1. 节点及其类型:
1). 元素节点
2). 属性节点: 元素的属性, 可以直接通过属性的方式来操作.
3). 文本节点: 是元素节点的子节点, 其内容为文本.

2. 在 html 文档的什么位置编写 js 代码?

0). 直接在 html 页面中书写代码.

<button id="button" onclick="alert('hello world');">Click Me!</button>

缺点:
①. js 和 html 强耦合, 不利用代码的维护
②. 若 click 相应函数是比较复杂的, 则需要先定义一个函数, 然后再在 onclick 属性中完成对函数的引用, 比较麻烦

1). 一般地, 不能在 body 节点之前来直接获取 body 内的节点, 因为此时 html 文档树还没有加载完成,
获取不到指定的节点:

<head>

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

        <title>Untitled Document</title>

        <script type="text/javascript">

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

            //打印结果为 null.

            alert(cityNode);

        </script>

    </head>

    <body>

    ......

2). 可以在整个 html 文档的最后编写类似代码, 但这不符合习惯

3). 一般地, 在 body 节点之前编写 js 代码, 但需要利用 window.onload 事件,　
该事件在当前文档完全加载之后被触发, 所以其中的代码可以获取到当前文档的任何节点.

<head>

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

            <title>Untitled Document</title>

            <script type="text/javascript">

                window.onload = function(){

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

                    alert(cityNode);

                };

            </script>

        </head>

        <body>

        ......

3. 如何来获取元素节点:

1). **document.getElementById: 根据 id 属性获取对应的单个节点

2). **document.getElementsByTagName:
根据标签名获取指定节点名字的数组, 数组对象 length 属性可以获取数组的长度

3). document.getElementsByName:
根据节点的 name 属性获取符合条件的节点数组,
但 ie 的实现方式和 W3C 标准有差别:
在 html 文档中若某节点(li)没有 name 属性,　
则 ie 使用 getElementsByName 不能获取到节点数组, 但火狐可以.

4). 其它的两个方法,　ie 根本就不支持, 所以不建议使用

4. 获取属性节点:
1). **可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值

2). 通过元素节点的 getAttributeNode 方法来获取属性节点,
然后在通过 nodeValue 来读写属性值

5. 获取元素节点的子节点(**只有元素节点才有子节点!!):
1). childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点
的指定子节点的集合, 可以直接调用元素节点的 getElementsByTagName() 方法来获取.
2). firstChild 属性获取第一个子节点
3). lastChild 属性获取最后一个子节点

6. 获取文本节点:
1). 步骤: 元素节点 --> 获取元素节点的子节点
2). 若元素节点只有文本节点一个子节点,
例如 <li id="bj" name="BeiJing">北京</li>, <p>你喜欢哪个城市?</p>,
可以先获取到指定的元素节点 eleNode,
然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值

7. 节点的属性:
1). nodeName: 代表当前节点的名字. 只读属性.
**如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串
2). nodeType：返回一个整数, 这个数值代表着给定节点的类型.
只读属性. 1 -- 元素节点, 2 -- 属性节点, 3 -- 文本节点
**3). nodeValue：返回给定节点的当前值(字符串). 可读写的属性
①. 元素节点, 返回值是 null.
②. 属性节点: 返回值是这个属性的值
③. 文本节点: 返回值是这个文本节点的内容

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

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

10. 为元素节点添加子节点:
1). appendChild(): var reference = element.appendChild(newChild): 给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点.
方法的返回值是一个指向新增子节点的引用指针.

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

/**

     * 互换 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);

            }

        }

    }

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

2). 自定义 insertAfter() 方法

 /**

     * 将 newChild 插入到 refChild 的后边

     * @param {Object} newChild

     * @param {Object} refChild

     */

    function insertAfter(newChild, refChild){

        var refParentNode = refChild.parentNode;

        //判断 refChild 是否存在父节点

        if(refParentNode){

            //判断 refChild 节点是否为其父节点的最后一个子节点

            if(refChild == refParentNode.lastChild){

                refParentNode.appendChild(newChild);

            }else{

                refParentNode.insertBefore(newChild, refChild.nextSibling);

            }

        }

    }

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

14. innerHTML属性:
1). 浏览器几乎都支持该属性, 但不是 DOM 标准的组成部分. innerHTML 属性可以用来读, 写某给定元素里的 HTML 内容

15. 其它属性, 参看 API: nsextSibling, previousSibling 等

JavaScript Node节点笔记的更多相关文章

  1. javascript node节点学习

    node节点学习 1 . 获取节点(元素)的方法 document.getElementById(); document.getElementsByTagName() document.getElem ...

  2. 【MarkMark学习笔记学习笔记】javascript/js 学习笔记

    1.0, 概述.JavaScript是ECMAScript的实现之一 2.0,在HTML中使用JavaScript. 2.1 3.0,基本概念 3.1,ECMAScript中的一切(变量,函数名,操作 ...

  3. 层次节点——NODE节点

    1.html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...

  4. 《编写可维护的javascript》读书笔记（中）——编程实践

    上篇读书笔记系列之:<编写可维护的javascript>读书笔记(上) 上篇说的是编程风格,记录的都是最重要的点,不讲废话,写的比较简洁,而本篇将加入一些实例,因为那样比较容易说明问题. ...

  5. JavaScript模式读书笔记 第4章 函数

    2014年11月10日 1.JavaScript函数具有两个特点: 函数是第一类对象    函数能够提供作用域         函数即对象,表现为:         -1,函数能够在执行时动态创建,也 ...

  6. javaScript 对象学习笔记

    javaScript 对象学习笔记 关于对象,这对我们软件工程到学生来说是不陌生的. 因为这个内容是在过年学到,事儿多,断断续续,总感觉有一丝不顺畅,但总结还是要写一下的 JavaScript 对象 ...

  7. Node节点

    1.Node:节点元素节点->HTML标签文本节点->文字 但是在标准浏览器(除了IE6~8)中会把空格和换行都当做文本节点来处理注释节点->注释document2.节点的特征元素节 ...

  8. JavaScript语言精粹笔记

    JavaScript语言精粹笔记 掌握语言的每个特性可以让你出风头,但是并不推荐,因为一部分的特性带来的麻烦可能远超本身的价值.正如书中所言,坏的材料并不能雕刻出好的作品,要成为一名更好的程序员,要取 ...

  9. JavaScript看书笔记01

    JavaScript看书笔记... ------------------- JavaScript允许var定义语句出现在函数内部的任意位置.JS中使用Var来显示的给变量声明 JavaScript是一 ...

随机推荐

  1. IDEA外部工具配置-OpenJML篇

    帮助文档 jetbrains帮助文档:https://www.jetbrains.com/help/idea/settings-tools-external-tools.html 使用external ...

  2. 记一次Debug过程

    刚刚加入新公司,就迎来第一场战斗,微服务拉入拉出测试. 简单的说,对于接入eureka 和 vi(携程开源的) 应用,在使用发布系统进行发布的时候,会经过这么一个流程   UP —— STARTING ...

  3. 命令“copy /V 已退出，代码为 1

    这个错误出现在vs生成事件里的命令行里. 第一种:简单粗暴直接清空命令行 第二种:通过输出的打印结果来分析: 比如我的出现这个原因一般有两种情况: 第一种:是可能我引用的共享盘Z盘无法连接: 第二种: ...

  4. Request中的各种地址

    今天来得匆忙,先上图吧,稍后再整理!

  5. ie11兼容

    项目里遇到ie11的问题, 1.控制台报:SCRIPT7002: XMLHttpRequest: 网络错误 0x80070005, 拒绝访问. 后来发现是由于传参过长,不应该用get请求,后改成pos ...

  6. LInux下几种定时器的比较和使用

    在数据通信过程中,会遇到对数据发送时间的格式要求.所以要在应用中根据实际要求选择不同的定时器,就要考虑到几种应用定时器的特点. 定时器文章参考 一般而言有, 1.sleep,usleep和nanosl ...

  7. MySQL—增删改查，分组，连表，limit，union，alter，排序，去重

    MySQL增删改查 在表格的增删改查中,查的内容是最多的,包括group by ,join,limit,union,alter,排序都是服务于查的 #sql语句数据行操作补充 #增加: #insert ...

  8. Postgresql插入或更新操作upsert

    幂等性的一个要求是多次操作的结果一致.对于update操作,多次直接的结果都是最后update的值,是满足需求的. 但对于insert,如果已经插入,第二次会报错,duplicate error, 主 ...

  9. 关于visual studio的一些日常总结

    一.常用的VS快捷键 批量注释:ctrl + k ctrl + c 批量解除注释:ctrl + k ctrl + u 转到声明:ctrl + F12 查找:ctrl + F 添加断点:F9 逐过程调试 ...

  10. storcli 简易使用介绍

    MegaCli 是LSI公司官方提供的SCSI卡管理工具,由于LSI被收购变成了现在的Broadcom,所以现在想下载MegaCli,需要去Broadcom官网查找Legacy产品支持,搜索MegaR ...