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 等

js Dom 编程的更多相关文章

  1. <读书笔记>《JS DOM编程艺术》

    2016/03/04 12:00 第一二章:JS的简史以及基本语法 1.P11 2.variable 3.P13    等于 4.P13 5.P14 转义字符 6.关联数组不是一个好习惯 7.P18 ...

  2. 读js DOM编程艺术总结

    第一章主要介绍一些历史性问题,javascript是Netcape和sun公司合作开发的. 第二章JavaScript语法: 1,数据类型:(弱类型)字符串,数值,布尔值(只有true和false,不 ...

  3. 2016.02.17 JS DOM编程艺术 第四五六章

    看完这三章内容,集中精力,加快速度.

  4. 关于Web端即JS端编程

    主要的技术是 HTML/JS/CSS/XML Web就是JS/DOM编程. 页面的数据来源: XML, JSON, HTML, Text, 第三方页面或者数据. 不一定都要跟服务器进行交互. JS端 ...

  5. 学习Javascript DOM 编程艺术的一点心得

    最近又看了一遍JS DOM编程艺术,照例来写一写读后感. 其实,我从中学到最深的是几个概念:1.平稳退化.当浏览器并不支持JS的时候网页的基本核心功能是还可以用的:2.逐渐增强.在原始的信息层上用其他 ...

  6. 《JavaScript DOM 编程艺术》读书笔记

    <JS DOM 编程艺术>笔记 一. 三种节点 元素节点.文本节点.属性节点 二. 获取元素 1.document.getElementById 2.(element)document.g ...

  7. JS之DOM编程

    为什么学dom编程? 通过dom编程,我们可以写出各种网页游戏 dom编程也是我们学习ajax技术的基础,所以我们必需掌握好dom编程.  dom编程简介 DOM=Document Object Mo ...

  8. Bom和Dom编程以及js中prototype的详解

    一.Bom编程: 1.事件练习: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  9. 《高性能javascript》 领悟随笔之-------DOM编程篇(二)

    <高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

随机推荐

  1. Linux 从网卡到TCP IP协议栈数据流跟踪与审计

    前沿 在学代码审计,然后最近做Linux协议栈的审计,发现Linux不愧是一个久经考验的系统,本来以为可以找到个DoS的,结果发现其在TCP/IP协议栈的链路层实现,利用了各种技术,用来提高性能与安全 ...

  2. 【Codeforces 1132D】Stressful Training

    Codeforces 1132 D 题意:给\(n\)个电脑的电量和耗电速度,你可以买一个充电器,它的充电速度是每秒\(v\)单位,\(v\)你自己定.问最小的\(v\)能使得在\(k\)秒内每秒给某 ...

  3. GZIP压缩提高网络传输效率

    [spring]通过GZIP压缩提高网络传输效率(可以实现任何资源的gzip压缩.包括AJAX) gzip是http协议中使用的一种加密算法,客户端向web服务器端发出了请求后,通常情况下服务器端会将 ...

  4. rook 排错记录 + Orphaned pod found kube-controller-manager的日志输出

    1.查看rook-agent(重要)和mysql-wordpress 的日志,如下: MountVolume.SetUp failed for volume "pvc-f002e1fe-46 ...

  5. PHPStorm FTP upload could not change to work directory 无法更改目录

    使用PHPStorm 2016 2.2版本 设置代码及时上传的时候遇到了这个问题,无法上传代码. 配置好了FTP之后去测试,是正常的,如下图一所示,也开启了那个被动模式(见图二),但是去上传代码的时候 ...

  6. c#静态构造函数 与 构造函数 你是否还记得？（转载）

    构造函数这个概念,在我们刚开始学习编程语言的时候,就被老师一遍一遍的教着.亲,现在你还记得静态构造函数的适用场景吗?如果没有,那么我们一起来复习一下吧.静态构造函数是在构造函数方法前面添加了stati ...

  7. [Python]Practice makes perfect

    Practice makes perfect 发音被儿子鄙视了.需要加强练习 以此自勉.

  8. .net core 中使用httpclient,HttpClientFactory的问题

    Microsoft 在.Net Framework 4.5中引入了HttpClient,并且是在.NET服务器端代码中使用Web API的最常用方法.但它有一些严重的问题,如释放HttpClient对 ...

  9. MGR主从不一致问题排查与修复

    运行环境 linux:CentOS release 6.8 (Final) kernel:2.6.32-642.6.2.el6.x86_64 mysql Server version: 5.7.21- ...

  10. 【IDEA】Intellij IDEA创建的Web项目配置Tomcat并启动Maven项目

    转载请注明出处:http://blog.csdn.net/qq_26525215本文源自[大学之旅_谙忆的博客] 本篇博客讲解IDEA如何配置Tomcat. 大部分是直接上图哦. 点击如图所示的地方, ...