javascript笔记6-DOM

DOM(文档对象模型)是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树,允许程序员添加、修改页面的一部分。

  1. 节点层次:DOM可以将任何HTML或XML文档描绘成一个由多层次节点构成的结构。如:

    • document节点有一个独生子:html元素。
    • 每个元素节点其实是一个对象。
    • 元素、元素的属性、甚至注释,都有各自的节点和各自节点的位置。
    • 所以,节点有很多种类型,而这些不同的节点都继承自一个基础类型:Node类型。
  2. Node类型的节点
    • Javascript中的所有节点类型均继承自Node类型。所以所有节点类型都有一部分相同的属性和方法。
    • 每个节点都有一个nodeType属性,这个属性标明节点的类型。在Node对象中保存着12种常量,分别代表12种节点类型。
      比如:
      Node.ELEMENT_NODE=1;
      Node.ATTRIBUTE_NODE=2;
      Node.TEXT_NODE=3;
      Node.COMMENT_NODE=8;
      。。。
      通过节点的nodeType来判断节点类型,比如:
      someNode.nodeType==1,说明该节点是元素节点。
    • 每个节点都有一个childNodes属性,保存着一个NodeList对象,该对象保存该节点的孩子信息。
      且每个孩子之间都是同胞关系。通过每个孩子节点的previousSibling和nextSibling属性,可以访问其他同胞节点。
    • 每个节点都有一个parentNode属性,指向文档树中的父节点。
    • 父子兄弟关系图:
    • 每个节点除了有些相同的属性外,还有一些相同的方法用于操作节点。
      appendChild(),加一个孩子。
      insertBefore(),加一个孩子,并放在某个孩子之前。
      replaceChild(),替换某个孩子。
      removeChild(),移除某个孩子。
  3. Document类型的节点
    • Document节点就是HTML节点树的根节点,表示整个HTML界面。
    • document对象是BOM中window对象的一个属性,因此可以作为一个全局对象来访问。
    • document对象有一个body属性,直接指向<body>元素。
    • document对象有一个title属性,标记文档(页面)的标题。
    • 通过getElementById()、getElementByTagName()来查找document内的元素。
  4. Element(元素)类型的节点
    • 每个元素都有自己的属性(id、name、class等),操作这些属性的方法主要有:

      getAttribute();
      setAttribute();
      removeAttribute();
    • style属性和onclick属性不能通过getAttribute()方法获取元素。
  5. DOM2和DOM3
    • DOM1级主要定义的是HTML和XML文档的底层结构。DOM2、3级则在这个结构的基础上引入了更多的交互能力。
    • DOM2、3级的目的在于扩展DOM的API,以满足操作XML的更多需求。
    • XML命名空间
      • 有了XML命名空间,不同XML文档的元素就可以混合在一起,不必担心发生命名冲突。
      • 命名空间用xmlns特性来指定。
      • XHTML的命名空间是http://www.w3.org/1999/xhtml.
      • 任何格式良好的XHTML页面都要讲命名空间包含在内。
      • 命名空间示例:

        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <title>Title of the document</title>
        </head>
        
        <body>
        The content of the document......
        </body>
        
        </html>
时间: 2024-10-14 05:25:18

javascript笔记6-DOM的相关文章

一些JavaScript中的DOM的优化小技巧

在进行DOM优化时需要关注的问题有:修改DOM的时候,会引起页面的重排,重绘.因为JS是单线程执行的,那么在重排重绘的过程中可能会阻塞用户的操作.为了更好的用户体验,必须要严格控制这些操作. 一.对象集合 NodeList 当我们调用:getElementsByTagName,getElementsByName,getElementsByClassName的时候,返回的结果是一个NodeList,这个NodeList是实时的.如果你修改对应的html,那么NodeList中也会得到修改. 而且,

JavaScript处理HTML DOM

本来只想好好写一篇博文,最后弄到好像重构一样了,越做越不满意,先这样吧:) HTML DOM - JavaScript处理HTML DOM 获取HTML元素 改变HTML元素 增删HTML元素 添加事件处理 获取HTML对象 一些属性 nodeType常量 其他   不建议使用   +hover显示详情 获取HTML元素+show detail document.getElementById(id) document.getElementsByTagName(name) Object Colle

javascript系列之DOM(二)

原生DOM扩展 我们接着第一部分来说,上文提到了两种常规的DOM操作:创建文档片段和遍历元素节点.我们知道那些雨后春笋般的库,有很大一部分工作就是提供了一些优秀 的DOM操作API.可见原生的一些方法和属性,还不能很灵活快捷的来完成我们所希望的操作.下面将总结出总结出几种很实用的扩展方法.包括 after()和before(), A:after()和before() 1 function after(elem){ 2 if(this.parentNode){ 3 this.parentNode.

JavaScript笔记之Function

一.函数定义 (1)使用function declaration 格式:function functionName(parameters) { function body } 注:此种方式声明的函数作用域是全局的,即在声明之前可以调用 (2)使用function expression 格式:var name = function (parameters) { function body }; 注:与(1)不同,在声明之前不可以调用 (3)使用function constructor() 格式:v

javascript笔记(二)

concat() 连接多个字符串,返回合并后的字符串. 1 var s1="a"; 2 var s2="b"; 3 var s3="c"; 4 5 console.log(s1.concat(s2,s3));//abc concat() 方法的结果等同于:result = s1 + s2 + ... + sN.如果有不是字符串的参数,则它们在连接之前将首先被转换为字符串. 数组中的concat():将参数添加为数组的元素,返回新的数组. 1 va

笔记-[1]-DOM的节点操作详解.

DOM:文档对象模型 操作DOM基本就是操作DOM的元素节点. 节点的属性: 1:objElement.childNodes  :获取该元素对象的的节点集合,有length长度属性,在标准浏览器下使用,会辩认文本节点的节点,一般不用,有其他的更好的属性(children) 2:objElement.children :     获取该元素对象的的节点集合,有length长度属性,在ie8下和其他标准浏览器兼容,只获取元素节点. 3:obj.nodeType   :获取对象的节点类型,1为元素节点

dojo 学习笔记之一 dom.byId dojo.byId registry.byId 的区别

在dojo中,除了沿用Dom结点, dojo 还自定义了一类结点用"dojoType" 进行标识. dojo 称这些结点为widget. 当检测到HTMl文档中某个标签定义了dojoType 属性之后,dojo会调用dojo包中相应的 js 及 css 文件对这个结点进行渲染. 从而这个结点元素就会相应地显示出具有dojo特色的样式及功能. 如此说来, dom.byId 跟 dojo.byId 获取到的就是普通的HTMl文档结构树中的某个结点元素,以下简称dom结点, 而 regist

JavaScript笔记二:变量、作用域和内存

1.基本类型和引用类型 基本类型:简单的数据段 引用类型:可能由多个值构成的对象,只能给引用类型添加属性 当复制他们的值时,基本类型实际上是又开辟了独立的空间存储值,而引用类型则是创建了指针,他们关联到同一个对象 2.执行环境和作用域 延长作用域链,没有块级作用域 3.确定一个值是哪种基本类型可以使用typeof操作符,而确定一个值是哪种引用类型可以使用instanceof操作符. 4.所有变量(基本和引用)都存在一个执行环境当中,这个执行环境决定了变量的生命周期,以及哪一部分代码可以访问其中的

2014年辛星解读Javascript之用DOM动态操纵HTML元素

关于DOM,我们了解了可以用DOM操纵HTML的一些属性和样式,还可以为HTML元素绑定事件等等,那么接下来,我们将涉及到用DOM来动态的创建.删除HTML等一些操作,我的核心思路还是重实战,因此,代码示例是肯定少不了的. 不过在使用DOM动态操纵HTML元素之前,我们还是先了解一下DOM树,下面是我从网上找的一个DOM树的图片,它的截图如下: 如果大家学习过"树"这种数据结构,就会很好理解,一个父节点可以包含N个子节点,这些子节点可能是div.p等标签,也可以是属性,还可以是中间的文

【JQuery】jquery对象和javascript对象即DOM对象相互转换

jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象.jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法:例如: $("#img").attr("src","test.jpg"); 这里的 $("#img")就是 jQuery 对象. DOM对象就是Javascript 固有的一些对象操作.DOM 对象能使用Javascript 固有的方法,但是不能使用