//DOM 的 CRUD

// c 创建create

// 1.直接往body中动态的添加标签(可以是任意类型)
document.write('helloWorld');
document.write('<p>"helloworld"</p>');

// 2. 创建一个新的标签,然后插入到body中任意的一个标签中 appendChild
var div = document.createElement('div');
div.style.background = 'red';
div.style.width = '500px';
div.style.height = '300px';
// 添加到父标签
document.body.appendChild(div);

// 往div中插入一张图片
var img = document.createElement('img');
img.src = 'image/img_02.jpg';
div.appendChild(img);

// 拿到p标签
var img1 = document.createElement('img');
img1.src = 'image/img_03.jpg';

var p = document.getElementById('word');
p.appendChild(img1);

// 删除有3种方式: 1. 直接用body进行删除,但是只能作用于直接子标签
// 2. 拿到当前标签的父标签,再来删除
// 3. 直接拿当前的标签,调用 remove()方法.

document.body.removeChild(p);
// 拿到当前标签的父标签,再来删除
p.parentNode.removeChild(p);
p.remove();

// 改 拿到对应的标签,做出改变...

// 查
// 第一种方式:
document.getElementsByClassName();
document.getElementsByName();
document.getElementsByTagName();
document.getElementById();
// (注意:id返回一个值,其他的都是返回数组)

// 第二种方式:遍历标签内部的内容

find(document.body);

function find(object){
for(var i in object){
console.log(object[i]);
}
}

console.log(document.body.childNodes);

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

上一篇讲述了DOM的基本知识，从其得知，在DOM眼中，HTML的每个成分都可以看作是节点(文档节点、元素节点、文本节点、属性节点、注释节点，其中，属性节点是属于元素节点)，本篇的内容就是通过DOM对这些节点进行增删改查的操作。

获取(R)

1. getElementById(id)、getElementsByName(name)、getElementsByTagName(tagName)，这三种方法都会忽略文档的结构。

  • getElementById(id)：通过id获取元素节点，如果页面上含有多个相同id的节点，那么只获取第一个节点，理论上，id在页面中应该是唯一的。jquery中通过$("#id")来获得节点，这种方式类似于css中的id选择器。
  • getElementsByName(name)：通过name获取一组元素节点，返回的是具有相同name的节点数组。注意，这个方法在IE和W3C(FireFox、Chrome)下表现是不一样的，这个方法应该不是DOM LEVEL 1里的规范，IE支持LEVEL 1，和后来的标准就有很多差异了。主要有如下几点区别：
    • IE下通过getElementsByName(name)只能取得表单元素的节点；
    • IE下不区分id和name，也就是说通过getElementsByName(name)取得的节点数组也包含id和name相同的了，通过getElementById(id)，也可以将name作为参数，看MSDN的官方说明。
    • When you use the getElementsByName method, all elements in the document that have the specified NAME or ID attribute value are returned. Elements that support both the NAME and the ID attribute are included in the collection returned by the getElementsByName method, but not elements with a NAME expando.
      1. <html>
      2. <head>
      3. <title>节点的增删改查</title>
      4. <script type="text/javascript">
      5. function init() {
      6. alert(document.getElementById("div1").nodeName);
      7. alert(document.getElementsByName("container").length);// IE结果是2,Chrome、FF结果是3
      8. alert(document.getElementById("container").value);// IE结果是1,Chrome、FF结果是2
      9. }
      10. </script>
      11. </head>
      12. <body onload="init()">
      13. <div id="div1" name="container">1</div>
      14. <!--<div id="div1"></div>-->
      15. <span id="div1" name="container">2</span>
      16. <input name="container" type="text" value="1" />
      17. <input id="container" type="text" value="2" />
      18. </body>
      19. </html>
  • getElementsByTagName(tagName)：通过tagName获取一组元素节点，返回的是具有相同tagName的节点数组。这个方法的特殊之处在于不仅仅可以通过顶层document来使用，所有元素节点都可以使用。如：document.getElementById("container").getElementByTagName("div");，这跟css样式有些相像，比如定义id为container元素节点下的所有div样式：.container div{display:none;}。

2. parentNode、firstChild以及lastChild，这三种属性都可以递归来使用。

html实例：

    1. <html>
    2. <head>
    3. <title>节点的增删改查</title>
    4. </head>
    5. <body>
    6. <div id="level1">
    7. <div id="level21">
    8. <div id="level3"><div>
    9. </div>
    10. <div id="level22"></div>
    11. </div>
    12. </body>
    13. </html>
  • parentNode：取得当前节点的父节点，如document.getElementById("level21").parentNode，也可以obj.parentNode.parentNode.parentNode。
  • firstChild：取得当前节点的第一个子节点，如document.getElementById("level1").firstChild;，也可以document.getElementById("level1").firstChild.firstChild。
  • lastChild：取得当前节点的最后一个子节点，如document.getElementById("level1").lastChild。

3. 根节点，document.documentElement得到HTML以及XML文档中的根节点，document.body提供了对body节点的直接访问。

4. 所有子节点：childNodes和children，各种版本各种浏览器下表现都不一样。

5. 节点信息：nodeName(tagName)、nodeValue、nodeType.

  • nodeName

    • 元素节点的nodeName是标签名称
    • 属性节点的nodeName是属性名称
    • 文本节点的nodeName是#text
    • 文档节点的nodeName是#document
  • nodeValue
    • 文本节点的nodeValue包含文本
    • 属性节点的nodeValue包含属性值
    • 元素节点和文档节点没有nodeValue
  • nodeType
    • 元素类型 节点类型
      元素 1
      属性 2
      文本 3
      注释 8
      文档 9

创建(C)&修改(U)&删除(D)

       写一个点击单元格变为文本框的示例。

  1. <html>
  2. <head>
  3. <title>节点的增删改查</title>
  4. <script type="text/javascript">
  5. function appendInput(tdNode) {
  6. // 创建input元素节点，createElement创建元素节点，createTextNode(value)创建文本节点
  7. var inputNode = document.createElement("input");
  8. // 给input属性赋值
  9. inputNode.value = tdNode.innerText;
  10. inputNode.name = "value";
  11. // 删除单元格的文本节点，参数为要删除的子节点对象
  12. tdNode.removeChild(tdNode.firstChild);
  13. // 将input追加到单元格中，appendChild(node)将node追加到父节点末尾，insertBefore(node1, node2)是将node1加入到node2之前
  14. tdNode.appendChild(inputNode);
  15. // 聚焦input，在chrome下，光标直接定位到文本最右边，IE下确实最左边
  16. inputNode.focus();
  17. // 将光标移到文本最右边
  18. moveCursorToRight(inputNode);
  19. }
  20. /** 光标移到文本最右边 */
  21. function moveCursorToRight(obj) {
  22. var r = obj.createTextRange();
  23. r.moveStart('character', obj.value.length);
  24. r.collapse(true);
  25. r.select();
  26. }
  27. </script>
  28. </head>
  29. <body>
  30. <table>
  31. <tr>
  32. <td onclick="appendInput(this)">Hello!</td>
  33. </tr>
  34. </table>
  35. </body>
  36. </html>

【repost】DOM CRUD的更多相关文章

  1. 【转载】Dom篇

    一. 初探Dom     1. Dom介绍 二. Dom基础     1. window顶级对象     2. body.document对象事件     3. 通用的HTML元素的事件     4. ...

  2. 【前端】:Dom

    前言: 昨天写了篇关于JavaScript的,今天写篇Dom的(插入4个实例),写完之后感觉知识点还不少~ 内容当然会用到[前端]:JavaScript的知识.下篇博客会写关于jQuery~~ 一.D ...

  3. 【repost】H5总结

    1.新增的语义化标签: <nav>: 导航 <header>: 页眉 <footer>: 页脚 <section>:区块 <article> ...

  4. js【jquery】 - DOM操作

    1.修改元素样式 js方式: var div2 = document.getElementById("") div2.style.width = '200px'; div2.cla ...

  5. 【repost】Javascript操作DOM常用API总结

    Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...

  6. 【前端】DOM操作

    1 什么是DOM 全称 Document Object Model 文档对象模型. 一个web页面的展示,是由html标签组合成的一个页面,dom对象实际就是将html标签转换成了一个文档对象.可以通 ...

  7. 【repost】JavaScript 事件模型 事件处理机制

    什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...

  8. 【repost】document.write的用处

    document.write的用处 document.write是JavaScript中对document.open所开启的文档流(document stream操作的API方法,它能够直接在文档流中 ...

  9. 【笔记】DOM探索基础篇（二）

    # 浏览器的渲染(HTML解析) ——参考: <前端必读:浏览器内部工作原理>http://kb.cnblogs.com/page/129756/ <谈谈DOMContentLoad ...

随机推荐

  1. ROS与深度相机入门教程-在ROS使用kinect v1摄像头

    ROS与深度相机入门教程-在ROS使用kinect v1摄像头 说明: 介绍在ros安装和使用kinect v1摄像头 介绍freenect包 安装驱动 deb安装 $ sudo apt-get in ...

  2. Java中重写与重载的区别

    方法重载:关键字overload,方法名和方法的返回类型都相同,方法参数个数和类型不一样方法重写:也叫方法覆盖,关键字override,相对于类继承而言,重写的方法名,返回类型,参数个数,参数类型都要 ...

  3. Java并发-volatile的原理及用法

    Java并发-volatile的原理及用法 volatile属性:可见性.保证有序性.不保证原子性.一.volatile可见性 在Java的内存中所有的变量都存在主内存中,每个线程有单独CPU缓存内存 ...

  4. 5B - 一只小蜜蜂...

    有一只经过训练的蜜蜂只能爬向右侧相邻的蜂房,不能反向爬行.请编程计算蜜蜂从蜂房a爬到蜂房b的可能路线数. 其中,蜂房的结构如下所示.  Input 输入数据的第一行是一个整数N,表示测试实例的个数,然 ...

  5. [中英对照]Introduction to DPDK: Architecture and Principles | DPDK概论: 体系结构与实现原理

    [中英对照]Introduction to DPDK: Architecture and Principles | DPDK概论: 体系结构与实现原理   Introduction to DPDK: ...

  6. Architecture.SOLID-Principles

    SOLID Principles Reference 1. Single Responsibility http://en.wikipedia.org/wiki/Single_responsibili ...

  7. linux系统web站点设置-http基础设置

    一.httpd2.2的组成: /etc/httpd:服务器的根目录 conf/httpd.conf,conf.d/*:配置文件 conf/magic:MIME的配置文件 logs:日志文件的存放路径, ...

  8. 编程学习笔记(第四篇)面向对象技术高级课程：绪论-软件开发方法的演化与最新趋势（4）meta、元与元模型、软件方法的未来发展

    一.meta.元与元模型 1.元. ​ "元" 英语是 Meta,meta在不同的行业领域有不同的翻译,在 IT 领域一般来说 Meta 是翻译成元,主要因为在 IT 中Meta ...

  9. boost timer代码学习笔记

    socket连接中需要判断超时 所以这几天看了看boost中计时器的文档和示例 一共有五个例子 从简单的同步等待到异步调用超时处理 先看第一个例子 // timer1.cpp: 定义控制台应用程序的入 ...

  10. 对象回收过程？线程池执行过程？ map原理？集合类关系？synchronized 和 volatile ? 同一个类的方法事务传播控制还有作用吗？java 锁

    1.  对象回收过程? 可达性分析算法: 如果一个对象从 GC Roots 不可达时,则证明此对象不可用. 通过一系列称为GC ROOTS的对象作为起点,从这些起点往下搜索,搜索走过的路径 称为引用链 ...