浅谈javascript中的DOM方法

1:获取对象的三种方法

　　1)document.getElementById(id);通过对象的属性id来获取;

　　2)element.getElementByTagName(tag);通过标签名来获取;

　　3)element.getElementByClassName(class);通过属性类名来获取;

2:属性的set和get方法.

　　1)object.getAttribute(attribute);获取元素的属性.===>>>HTMLDOM: object.attribute;

　　2)object.setAttribute(attribute,value);设置元素的属性.====>>>HTMLDOM:object.attribute=value;

3:有关节点的一些属性

　　1)childNodes属性:返回一个数组.

　　　　element.childNodes[0]等价于element.firstChild

　　　　element.childNodes[element.childNodes.length]等价于element.lastChild

　　2)nodeType属性:共有12种可能的取值.但其中仅有3种具有使用价值

　　　　元素节点的nodeType=1

　　　　属性节点的nodeType=2

　　　　文本节点的nodeType=3

　　3)nodeValue属性:主要功能是改变元素中的文本内容功能类似object.innerHTML

　　　　例如:<p id="p">这是一个文本节点</p>

　　　　var p=document.getElementById("p");

　　　　p.childNodes[0].nodeValue="改变文本节点的内容";

　　　　这样就改变了p节点中的内容;

　　　　也可以这样实现:p.innerHTML="改变文本节点的内容";

以上所述就是本文的全部内容了，希望大家能够喜欢。

赞 (0)

相关推荐

  • js常用DOM方法详解

    js常用DOM方法详解

    介绍几个js DOM的常用方法 获取元素节点 getElementById    getElementsByTagName    getElementsByClassName 先写一个简单的网页做测试: /* test.html */ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <

  • AngularJS实现动态编译添加到dom中的方法

    本文实例讲述了AngularJS实现动态编译添加到dom中的方法.分享给大家供大家参考,具体如下: 在使用angularjs 时,希望通过动态构建angular模版,再通过angular进行展示. 使用 方法如下: <html ng-app="app"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> &l

  • JS动态创建DOM元素的方法

    本文实例讲述了JS动态创建DOM元素的方法.分享给大家供大家参考.具体如下: 近日,因工作需要,需要通过点击某个元素后, 动态创建一个DOM元素并显示,因此写了一些相关的JS函数,在此记录,以作备忘: /* 动态创建DOM元素的相关函数支持 */ /* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; }

  • javascript先序遍历DOM树的方法

    DOM树由文档中的所有节点(元素节点.文本节点.注释节点等)所构成的一个树结构,DOM树的解析和构建是浏览器要实现的关键功能.既然DOM树是一个树结构,那么我们就可以使用遍历树结构的相关方法来对DOM树进行遍历,同时DOM2中的"Traversal"模块又提供了两种新的类型,从而可以很方便地实现DOM树的先序遍历. 注:本文中的5种方法都是对DOM的先序遍历方法(深度优先遍历),并且只关注Element类型. 1. 使用DOM1中的基础接口,递归遍历DOM树 DOM1中为基础类型Nod

  • 浅析JS操作DOM的一些常用方法

    getElementById(): 获取有指定惟一ID属性值文档中的元素 getElementsByName(name): 返回的是数组 getElementsByTagName(): 返回具有指定标签名的元素子元素集合 getAttribute(): 返回指定属性名的属性值 document.getElementsByTagName("a")[0].getAttribute("target"); setAttribute(): 添加指定的属性,并为其赋指定的值.

  • js加载之使用DOM方法动态加载Javascript文件

    js加载之使用DOM方法动态加载Javascript文件

    传统上,加载Javascript文件都是使用<script>标签. 就像下面这样: <script type="text/javascript" src="example.js"></script> <script>标签很方便,只要加入网页,浏览器就会读取并运行.但是,它存在一些严重的缺陷. (1)严格的读取顺序.由于浏览器按照<script>在网页中出现的顺序,读取Javascript文件,然后立即运行,

  • 原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法

    原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法

    用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1.父页面(demo.html),在父页面修改子页面div的背景色为灰色,原来为红色: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • js使用DOM操作实现简单留言板的方法

    js使用DOM操作实现简单留言板的方法

    本文实例讲述了js使用DOM操作实现简单留言板的方法.分享给大家供大家参考.具体分析如下: 如图所示简易留言板,也就是自娱自乐版,说白了就是练习DOM操作. 要点一:document.createElement("标签名") 新建元素 要点二:父元素.appendChild("元素")  把新建的元素插入到页面的标签中(在标签的最后一个显示),这样才会在浏览器中显示出来 要点三:父元素.insertBefore("元素","要插入哪个元

  • javascript中html字符串转化为jquery dom对象的方法

    原html字符串如下: var text="<div id='overLay' style='width:50px;height:60px;background:url(imgs/back.png) left top no-repeat; position: absolute;'>" + "<img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px

  • javascript firefox兼容ie的dom方法脚本

    if(!document.all){ //zzcv的ff ie兼容脚本 /*脚本没有解决的问题及处理: 2.IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.  解决方法:统一使用[]获取集合类对象.  3.IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.  解决方法:统一通过getAttribute()获取自定义属性.  4.IE

随机推荐