当前位置: 首页 > >

JavaScript 操作DOM对象

发布时间:

1)JavaScript ?操作DOM?象

1.DOM:是Document ?Object ?Model 的缩写,及文档对象模型


2.DOM通常分为三类:DOM Core(核心)、HTML-DOM 和 CSS-DOM


? ?1.DOM Core


????????????????DOM Core 不是JavaScript的专属品,任何一种支持DOM的编辑器语言都可以使用它


它的用途不仅限于处理一种使用标记语言编写出来的文档如HTML文档


getElementById()/getElementByTagName()等方法都是 DOM Core的组成部分


栗子:使用Document.getElementByTagname("input")可获取页面中的元素

?获取DOM模型中的某些对象、属性、既可以使用DOM-Core实现,也可以使用HTML-DOM实现


?相对于DOM Core获取对象、属性而言,当使用HTML-DOM时,代码通常较为简单,只是它


? ? ? ? ?的应用范围没有DOM Core广泛,仅适用于处理HTML文档


???3.CSS-DOM


CSS-DOM是针对CSS的操作,在JavaScript中,CSS-DOM技术的主要作用是获取和设置Style


对象的各种属性,即CSS属性,通过改变style对象的各种属性,可以使用网页呈现出各种


不同的效果。

简介:DOM是以树状结构组织的HTML文档,根据DOM概念,我们可以知道,?HTML文档中每个标签


????????????????????或元素都是一个节点,在DOM中是这样规定的


2-1:整个文档是一个文档节点


2-2:每个HTML标签是一个元素节点


2-3:包含在HTML元素中的文本是文本节点


2-4: 每个HTML属性是一个属性节点


2-5:注释属于注释节点

? ? @每个节点都有父节点,除了根(他没有父节点)如和的父节点?都是,


????????????????????????????????文本?节点DOM应用的父节点是

节点。


????????????@一个节点可以拥有任意数量的子节点,如节点的子节点有、和



????????????@同胞节点是拥有相同父节点的节点、如、和

就是兄弟节点、他们的父节点均


????????????????????????????????为


3.访问节点


使用DOM Core访问HTML文档的节点主要有两种方式,一种是使用getElement系列方法访问节点、另外一


????????种是根据节点的层次关系访问节点。

3-1:使用getElement系列方法访问指定节点getElementById


1.getElementById()返回按id属性查找的第一个对象对象的引用


2.getElementByName()返回按带有指定名称name查找的对象集合


3.getElementByTagName()返回带有指定标签 TagName查找的对象的集合

3-2:根据层次关系访问节点

通过getEleMent三种方法都会忽略文档的结构,因此在HTML DOM中提供了一些节点属性如下

节点属性:


1.parentNodes ? ????????返回节点的父节点


2.childNods 返回子节点集合,childNods[i]


3.firstChild ????????返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点


4.lastChild 返回节点的最后一个子节点


5.nextSibling ????????下一个节点


6.prebiousSiling ????????上一个节点


var obj = document.getElementById("news");


var xx=obj.lastChild.firstChild.nextSibling.nextSibling.innerHTML;


alert(xx);

运行结果:
  • 我是测试C


  • 要是在第一个li标签打一个回车,相当于一个空行,则运行结果有变化?

    运行结果:
  • 我是测试B


  • 解析:浏览器把空行也当做了标签,这就是浏览器的不兼容问题

    避免上述现象应该怎么办那?

    在JavaScript中给大家提供了一组可兼容不同浏览器的element属性,可以消除空行

    firstElementChild ? ? ? ?????????返回节点的第一个子节点,最普遍的用法是访问
    ?
    lastElementChild ? ????? ? ? ?返回节点的最后一个节点

    nextElementSibling ??????下一个节点

    previousElementSibling ? ? ?上一个节点

    var obj = document.getElementById("news");


    var xx=obj.lastElementChild.firstElementChild.nextElementSibling.nextElementSibling.innerHTML;


    alert(xx);

    注意事项:


    ????? ? 在IE下支持 ?firstChild ?lastChild ?previousSibing ? nextSibling,但是在FireFox 下由于它会把标签之间
    1.操作节点属性


    ?????????语法: ?getAttribute(“属性名”);


    ????????????????????? setAttribute(“属性名”,“属性值”);


    ????? ? 小栗子:



    选择你喜欢的书:我和狗狗一起活下来林允儿







    友情链接: 时尚网 总结汇报 幼儿教育 小学教育 初中学习资料网