JavaScript之DOM操作(二)

这一篇写写常用并且通用的操作节点的一些方法。

1.节点方法

1>appendChild()

向childNodes列表的末尾添加一个节点,语法 var aChild = element.appendChild(aChild);

需要注意的是,如果被传入的节点在文档中已经存在,那结果会将该节点从原来位置移除,然后再添加到指定位置。例:

var returnedNode = someNode.appendChild(someNode.firstChild);
console.log(returnedNode  === someNode.firstChild); // false
console.log(returnedNode  === someNode.lastChild); // true

2>insertBefore()

把节点放在childNodes列表中某个指定节点之前,语法 var insertedNode = parentNode.insertBefore(newNode, referenceNode);

该方法接受两个参数,一个需要传入的节点,一个是参考节点,当参考节点为null时,insertBefore()和appendChild()效果相同。例:

var returnedNode = someNode.insertBefore(newNode, null);
console.log(newNode === someNode.lastChild); // true

3>removeChild()

从DOM中删除一个子节点,返回删除的节点。语法 var oldChild = node.removeChild(child);

注意,可以使用一个变量如oldChild来保存这个被移除的节点,如果需要,还可以在重新添加到文档中。

4>replaceChild()

用一个节点替换另外一个节点,并返回被替换的节点。语法 var replacedNode = parentNode.replaceChild(newChild, oldChild);

如上,用newChild替换掉oldChild

5>cloneNode()

节点调用该方法,返回一个该节点的副本。语法 var dupNode = node.cloneNode(deep);

node将要被克隆的节点,dupNode克隆生成的副本节点,deep 可选是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身。

6>contains()

返回的是一个布尔值,来表示传入的节点是否为该节点的后代节点。语法 node.contains( otherNode);

如果 otherNode 是 node 的后代节点或是 node 节点本身.则返回true , 否则返回 false.

7>hasChildNodes()

返回一个布尔值,当前节点有子节点时返回true,否则false。语法 element.hasChildNodes()

8>normalize()

从MDN上截了一张图:

时间: 2024-10-26 17:35:16

JavaScript之DOM操作(二)的相关文章

Python之路day13 web 前端(JavaScript,DOM操作)

参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容回顾: 1. HTML标签 html/head/body/ input div,span a p br span table > tr行 th表头列 td表头列 h form> action method enctype=;;; select option input系列: text passwo

第一百一十六节,JavaScript,DOM操作样式

JavaScript,DOM操作样式 一.操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检测当前浏览器支持CSS能力的级别. DOM1级实现了最基本的文档处理,DOM2和DOM3在这个基础上增加了更多的交互能力,这里我们主要探讨CSS,DOM2增加了CSS编程访问方式和改变CSS样式信息. DOM一致性检测 功能 版本号 说明 Core 1.0.2.0.3.0 基本的DOM,用于表现文档

JS - JavaScript和DOM操作

1.HTML元素标记 - 超文本标记语言 决定你网页中有哪些东西 2.CSS - 样式表 决定你网页中的这些元素标记的样式和布局 3.JS - JavaScript 决定你网页中的这些元素标记的功能和特效 3.1.onclick:单机 ondblclick:双击 function 执行函数 alert 显示框只有确定 confirm 显示框有确定和取消 prompt 显示框下面填写内容 var 万能变量 <body> <a onclick="a()"></

JavaScript的DOM操作

1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null. dialogArgument:对话框返回值. 子对象:history,location,document,status,menubar,toolbar等. 方法(函数):事件(事先设置好的程序,被触发).

JavaScript的DOM操作(2)

补充:   回车符\r和换行符\n的区别:\r 相当于enter,是段落与段落之间的区别, \n 相当于shift+enter,是行与行之间距离,比较小 几种window操作方法: 1.获取当前窗口大小并打印: var height=window.innerHeight;var width = window.innerWidth; document.write("<br/>"+"height"+height+",width"+widt

课堂笔记--------JavaScript 的DOM操作

1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null. dialogArgument:对话框返回值. 子对象:history,location,document,status,menubar,toolbar等. 方法(函数):事件(事先设置好的程序,被触发).

HTML JavaScript的DOM操作

1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null. dialogArgument:对话框返回值. 子对象:history,location,document,status,menubar,toolbar等. 方法(函数):事件(事先设置好的程序,被触发).

HTML-教案-JavaScript的DOM操作

1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null. dialogArgument:对话框返回值. 子对象:history,location,document,status,menubar,toolbar等. 方法(函数):事件(事先设置好的程序,被触发).

JavaScript的DOM操作(二)

一:window.history对象 历史记录,通过历史记录可以操作页面前进或者后退 window.history.back();后退 window.history.forward();前进 window.history.go(n); n是正数代表前进n个页面,n是负数代表后退n个页面. 二:window.location对象 location地址栏 var s = window.location.href;获取当前页面的地址 window.location.href="http://www.b