①、创建一个元素节点:

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. RAC修改数据库的spfile位置

    RAC修改spfile位置 [root@rac1 ~]# su - oracle [oracle@rac1 ~]$ sqlplus  / as sysdba SQL*Plus: Release 11. ...

  2. Eclipse中调试Jar包的源码(调试Struts2源码)

    首先在Eclipse中创建一个新的项目,加入运行Struts2所需要的JAR文件,并将它们加到项目的CLASSPATH中(在Lisbs中右击 build path 如下图: ),成功后的界面如图 1- ...

  3. (7)Stream简介

    流的个人理解: 怎样获得流: 怎样处理流: 中间操作和终端操作介绍: 中间操作和终端操作的使用: 流的个人理解: Stream也就是流,他和IO流不一样,他是java8诞生的东西,我对他的理解就是一个 ...

  4. Git的其他一些使用案例

    按照格式输出提交号 作者 时间 git log --pretty=format:"%h %an %cd" --date=iso 获取所有远程的tag和他的commit sha1 g ...

  5. shell脚本,每5个字符之间插入"|",行末不插入“|”

    文本aaaaabbbbbcccccddddeeeeefffffkkkkkvvvvnnnnnggggg 希望得到的结果如下:aaaaa|bbbbb|ccccc|ddddeeeee|fffff|kkkkk ...

  6. nodejs 中的 NODE_PATH

    在使用 nodejs 开发中我们都免不了要去安装一些第三方模块. 那么你或多或少的遇到过以下一些问题 再继续阅读之前,我们先来弄清楚一个概念. npm install --global xxx 属于全 ...

  7. Spring 循环依赖

    循环依赖就是循环引用,就是两个或多个Bean相互之间的持有对方,比如CircleA引用CircleB,CircleB引用CircleC,CircleC引用CircleA,则它们最终反映为一个环.此处不 ...

  8. Oracle里的执行计划

    1 执行计划的查看 1 explan plan 2 dbms_xplan包 3 sqlplus中 set autot 4 10046 5 awr报告 6一些现成的脚本 7 10053 常见的就前4种 ...

  9. MariaDB存在的问题

    MySQL与MariaDB对嵌套的查询语句当中的order by的处理方法不同.MySQL会忠实执行内层查询的排序子句,但是MariaDB会将这个order by去掉,理论依据就是关系理论 --- 一 ...

  10. BugkuCTF WEB

    web2 打开链接,一大堆表情 查看源代码 得到 flag 文件上传测试 打开链接 选择 1 个 jpg 文件进行上传,用 burp 抓包改包 将 php 改为 jpg,发包 得到 flag 计算器 ...