JS中DOM操作

DOM创建

DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口)。

DOM描绘了一个层次化的节点树,允许开发人员添加,移动,删除和修改页面的某一部分。

DOM脱胎于Netscape及微软公司创始的DHTML(动态HTML),但现在它已经成为表现和操作页面标记的真正的跨平台,语言中立的方式。

注意:

IE中所有DOM对象都是以COM对象的形式实现的,这意味着IE中的DOM对象与原声JavaScript对象的行为或活动特点不一致

节点操作:

插入节点:

appendChild();用于向childNodes列表尾部添加一个节点。如果传入到appendChild()中的节点已经是文档的一部分了,那结果就是将该节点从原来位置转移到新位置。

insertBefore(); 把需要插入的节点放到childNodes列表的指定位置上,接收两个参数(要插入的节点,参照节点);被插入的节点会变成参照节点的前一个同胞节点,同时返回。如果参照节点是NULL,则与appendChild执行相同的操作。

替换节点:

replaceChild(); 替换节点;接收两个参数(要插入的节点和要替换的节点)

移除节点:

removeChild(); 移除节点;返回被移除的节点。

其他方法:

cloneNode(); 复制节点。参数为true/false。为true时进行深度复制,为false时进行浅度复制。

normalize(); 移除空的文本节点,并连接相邻的文本节点。

Document类型:

时间: 2024-08-07 19:32:52

JS中DOM操作的相关文章

5月16日上课笔记-js中DOM操作

一.DOM操作 DOM节点的操作 增加 删除 修改 节点的信息: nodeName 获取节点的标签名 parentNode 获取父节点 childNodes IE忽略回车换行,chrome回车换行是文本节点 nodeType 节点类型: 1:元素节点 3:文本节点 9:document节点 2:属性节点 firstChild(支持IE浏览器) || firstElementChild(支持谷歌浏览器) //获取第一个子节点 var fc = ulDom.firstElementChild ||

JS中Dom操作的常用案例实现

本文介绍几个Dom操作的几个常用的案例.虽然现在各种web框架层出不穷,也很方便.但是了解最基本的实现方法对我们开发还是有很大的帮助的: 1.图片滚动案例 1.1  效果如下: 1.2  代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .

js常用dom操作

利用dom获得页面元素节点 a) document.getElementById()    //id获得元素节点对象 b) document.getElementsByTagName()   //html标签获得元素节点对象(数组) c) document.getElementsByName(); //常用于表单(数组) 属性判断当前节点类型nodeType a)        1  元素节点 b)        2  属性节点 c)        3  文本节点 d)        9  文档

JS的DOM操作及动画

JS的DOM操作DOM:Document Object ModelBOM:Bowers(浏览器) Object Model 找到元素:var a=document.getElementById("id") :就找到的元素放在变量中:                id选择器:document.getElementById("id"): 根据id找,最多找一个:                class选择器:document.getElementClassName(

js中数组操作

var selectedCodeArray = []; var num = $.inArray(值, selectedCodeArray)  //值在数组中的位置 selectedCodeArray.push(值码); selectedCodeArray.splice(num, 1);//从数组中删除 js中数组操作,布布扣,bubuko.com

js中select操作实例

window.onload=function(){ //创建select var select1= document.createElement("select"); select1.id="select1"; for(var i=0;i<5;i++){ //创建option var option=document.createElement("option"); //var option=new option(); option.valu

【2017-3-29】js语法 DOM操作

(一)Js简单介绍 1. 进行数据运算   控制浏览器的一些功能   控制元素(属性,样式,内容) 2. Js的引用位置: 内联Js  -  可以仿放在html文件的任意位置,推荐放在html的外面,页面的最底部 外部Js  -  将Js代码写到一个以Js结尾的文件中去,在将这个文件引用到html文件中去 内嵌Js (二)Js内容 1.基本数据类型: 字符串     var a = 'aaaa';  --  单引号,双引号都可以   小数       var a = 1.2; 整数      

JS中DOM以及BOM

一.bom对象 1screen对象 console.log(screen.width);// 屏幕宽度 console.log(screen.height);// 屏幕高度 console.log(screen.availWidth); //可用宽度 console.log(screen.availHeight); //可用高度=屏幕高度-底部任务栏 2location对象 完整的URL路径:协议://主机名(IP地址):端口号/文件路径?传递参数(name1=value1&name2=valu

js中DOM 节点的一些操作方法

什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节点组成的. 解析过程 HTML加载完毕,渲染引擎会在内存中把HTML文档,生成一个DOM树,getElementById是获取内中DOM上的元素节点.然后操作的时候修改的是该元素的属性. DOM树(一切都是节点) DOM的数据结构如下: 上图可知,在HTML当中,一切都是节点:(非常重要) 元素节点:HMTL标签. 文本