javascript学习基础笔记之DOM对象操作_javascript技巧

DOM文档对象模型是HTML和XML的应用程序接口(API),DOM将整个页面规划成由节点层次构成的文档。DOM对象给予开发者对HTML的访问权限,并且使开发者能将HTML作为XML文档来处理和查看。DOM对象是与语言无关的API,意味着它的实现并不是与javascript绑定,这在于初学者来说可能会理解错误。DOM是针对XML的基于树的API,它关注的不仅仅是解析XML代码,而是用一系列相互关联的对象来表示这些代码,而这些对象可以被修改,而且无需重新解析代码就能直接访问它们。由于DOM的使用上的简便,因此它成为了Web浏览器和javascript最喜欢的方法。document对象是BOM的对象,即window.document==document,但是它又同时属于DOM,也是HTML DOM的HTMLDocument对象的一种表现形式,反过来说它也是XML DOM Document对象。

JavaScript中的大部分处理DOM的过程都是利用document对象。

要访问html元素,可以利用document的documentElement特性:

var oHtml=document.documentElement;

oHtml对象包含一个表示<html/>的HTMLElement对象,通过:

var oHead=oHtml.firstChild;

var oBody=oHtml.lastChild;

可以得到分别表示<head/>和<body/>的对象,也可以通过使用childNodes特性来完成:

var oHead=oHtml.childNodes[0];//将childNodes当做Array来使用;

var oBody=oHtml.childNodes[1];//将childNodes当做Array来使用;

上述表达可以使用更加正规的表达方式,那就是shiyongitem()方法:

var oHead=oHtml.childNodes.item(0);

var oBody=oHtml.childNodes.item(1);

其实在HTML页DOM对象定义了document.body作为指向<body/>元素的指针,即

oBody = document.body;

但是document.head却没有定义,它的返回值是undefined;

时间: 2024-12-31 19:30:51

javascript学习基础笔记之DOM对象操作_javascript技巧的相关文章

JavaScript实现DOM对象选择器_javascript技巧

目的:  根据传入的选择器类型选出第一个符合的DOM对象.  ①可以通过id获取DOM对象,例如 $("#adom");  ②可以通过tagName获取DOM对象,例如 $("a");  ③可以通过样式名称获取DOM对象,例如 $(".classa");  ④可以通过attribute匹配获取DOM对象,例如 $("[data-log]"),$("[data-time=2015]");  ⑤可以通过层叠组合

JavaScript学习总结之JS、AJAX应用_javascript技巧

1.AJAX 简介 AJAX(音译为:阿贾克斯) = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术,也就是在无需重新加载整个网页的情况下,能够更新部分网页的技术.AJAX 不是新的编程语言,而是一种使用现有标准的新方法,是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,传统的

浅谈Javascript中的12种DOM节点类型_javascript技巧

前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组成一个树状结构.DOM的最小组成单位叫做节点(node),文档的树形结构(DOM树)由12种类型的节点组成. 属性 一般地,节点至少拥有nodeType.nodeName和nodeValue这三个基本属性. 节点类型不同,这三个属性的值也不相同 nodeType nodeType属性返回节点类型的常

javascript实现对表格元素进行排序操作_javascript技巧

我们在上网中都能看到很多能够排序的,如大小.时间.价格等 现在我们也试一下排序功能: 排序的函数代码:里面含有点击之后排序--还原,和排升序和降序. function sortAge(){ //对年龄进行排序,要先进行获得每一行对象,然后对象对象中的第一个(从0 开始)的大小进行排序 var tabNode = document.getElementById("tabid"); var rows0 = tabNode.rows; var rows1 = []; //现将元素拷贝一份出来

每天一篇javascript学习小结(属性定义方法)_javascript技巧

定义(Definition).定义属性需要使用相应的函数,比如:Object.defineProperty(obj, "prop", propDesc) 如果obj没有prop这个自身属性,则该函数的作用是给obj添加一个自身属性prop并赋值, 参数propDesc指定了该属性拥有的特性(可写性,可枚举性等). 如果obj已经有了prop这个自身属性,则该函数的作用是修改这个已有属性的特性,当然也包括它的属性值.1.defineProperty       var book = {

JavaScript Tips 使用DocumentFragment加快DOM渲染速度_javascript技巧

大家在使用JavaScript的时候,DOM操作是最平常不过的了, 随着Web前端技术的发展,我们越来越多的使用JS来操作DOM元素,比如通过ajax请求获取到数据,然后更新页面上的元素,一般情况下,这种操作我们会用类似node.appendChild()这中方式来完成.这个方法是无缓冲的,也就是说我们每次调用appendChild方法的时候,浏览器都会重新渲染页面.当然,使用这种方法也没有什么不行,因为我们在一般情况下都是对少量的DOM节点进行更新,也并不会带来太大的性能问题,但是如果大量的更

javascript学习随笔(编写浏览器脚本 Navigator Scripting )_javascript技巧

在 HTML 中使用JavaScript JavaScript能以两种方式嵌入HTML: 作为语句和函数使用时,用 SCRIPT 标记 作为事件处理程序使用时,用 HTML 标记 SCRIPT 标记 使用SCRIPT标记把脚本嵌入在HTML中,格式如舷: <SCRIPT> _ JavaScript 语句</SCRIPT> LANGUAGE属性作为可选项,用于指定脚本语言,用法如下: <SCRIPT LANGUAGE="JavaScript"> _Ja

javascript setTimeout()传递函数参数(包括传递对象参数)_javascript技巧

于是,上网查找了一下,用了另一种写法setTimeout("fun("+参数+")", 1000),还是不行,但是以上写法在传递form表单的textarea是可以的,比如hml是这样: 复制代码 代码如下: <body> <div class="main"> <div id="showpane" class="showpane"> </div> <di

javascript 用原型继承来实现对象系统_javascript技巧

javascript中,对象没有原型,而构造器有原型 原型的含义:如果构造器有一个原型对象 A,则由该构造器创建的实例都必然复制自A 复制代码 代码如下: /*申明2个构造器*/ var flower=function(){ this.name="nokia"; } var flower2=function(){ this.age=22; } /*原型链*/ flower2.prototype=new flower(); /*根据刚才原型的定义,实例obj必然复制自new flower