Dom对象的常用方法

Dom对象的常用方法:
(1)getElementById() 查询给定ID属性值的元素,返回该元素的元素节点
1、  查询给定ID属性值的元素,返回该元素的元素节点。也称为元素对象。
                2、  因为在一个html页面中id的值是唯一的,所以返回值也是唯一的。所以方法的名称为getElementById()而不是getElementsById()
                3、  该方法只能用于document对象,类似与java的static关键字。

(2)getElementsByName()查找给定name属性的所有元素,这个方法将返回一个节点集合,也可以称为对象集合
1、查找给定name属性的所有元素,这个方法将返回一个节点集合,也可以称为对象集合。
                2、这个集合可以作为数组来对待,length属性的值表示集合的个数。
         3、因为在html页面中,name不能唯一确定一个元素,所以方法的名称为getElementsByName而不是getElementByName

(3)getElementsByTagName()查询给定标签名的所有元素
1、查询给定标签名的所有元素
                2、因为在html页面中,标签名不是唯一的,所以返回值为节点的集合。
                3、这个集合可以当做数组来处理,length属性为集合里所有元素的个数
                4、可以有两种形式来执行这个方法:
                    1、var elements =document.getElementsByTagName(tagName); 
                    2、var elements = element.getElementsByTagName(tagName);
          5、从这两种方法可以看出持有这个方法的对象并不一定是整个文档对象(document).也可以是某一个元素节点。

(4)hasChildNodes()该方法用来判断一个元素是否有子节点,返回值为true或者false
1、该方法用来判断一个元素是否有子节点
        2、返回值为true或者false
             3、文本节点和属性节点不可能再包含子节点,所以对于这两类节点使用 ChildNodes()方法 返回值永远为false.
        4、如果hasChildNodes()返回值为false,则childNodes,firstChild,lastChild将为空数组或者空字符串。

(5)nodeName
1.如果节点是元素节点,nodeName返回元素的名称
2.如果给定节点为属性节 点,nodeName返回属性的名称
3.如果给定节点为文本节点,nodeName返回为#text的字符串
(6)nodeType
1、元素节点类型  值为1
                2、属性节点类型  值为2
                3、文本节点类型  值为3
(7)nodeValue
1.如果给定节点是属性节点,返回值是这个属性的值
                2.如果给定节点是文本节点,返回值是这个文本节点的内容
                3.如果给定节点是元素节点,返回值是null
(8)replaceChild()
1.把一个给定父元素里的一个子节点替换为另外一个子节点
2.var reference = element.replaceChild(newChild,oldChild)
        3.返回值指向已经被替换掉的那个子节点的引用
(9)getAttribute()
1、返回一个给定元素的给定属性的节点的值
        2、var attributeValue = element.getAttribute(attributeName)
        3、给定属性的名字必须以字符串的形式传递给该方法
        4、给定属性的值将以字符串的形式返回
                5、通过属性获取属性节点
(10)setAttribute()
1、将给定元素添加一个新的属性或改变它现有属性的值
       2、element.setAttribute(attributeName,attributeValue);
                3、属性的名字和值必须以字符串的形式传递
                4、如果这个属性已经存在,那么值将被attributeValue取代
                5、如果这个属性不存在,那么先创建它,再给他赋值
(11)createElement()
1、按照给定的标签名创建一个新的元素节点,方法的参数为被创建的元素的名称
        2、var reference = document.createElement(elementName);
3、方法的返回值指向新建节点的引用,返回值是一个元素节点,所以nodeType 为1          
                4、新建的节点不会自动添加到文档里,只是存在于document里一个游离的对象
(12)createTextNode()
1、创建一个包含给定文本的新文本节点
                2、这个方法的返回值指向这个新建的文本节点的引用
                3、该方法有一个参数:新建文本节点的文本内容
                4、它是一个文本节点,所以nodeType值为3
        5、新建的文本对象不会自动添加到文档里,属于游离态的对象。
(13)appendChild()
1、为给定元素增加一个子节点
                    var newreference = element.appendChild(newChild);
          2、给定子节点newChild将成为element的最后一个节点
                 3、方法的返回值指向新增节点的引用
                 4、该方法通常与createElement()与createTextNode()一起使用
                 5、新节点可以追加给文档中的任何一个元素(不是属性和文本)
(14)insertBefore()
1、把一个给定节点插入到一个给定元素子节点的前面
        2、var reference = element.insertBefore(newNode,targetNode)
                 3、newNode节点将作为element的子节点出现,并在targetNode节点的前面
                 4、节点targetNode必须是element的一个子节点
                 5、该方法通常与createElement和createTextNode结合使用
(15)removeChild()
1、从给定的元素里删除一个子节点
          2、var reference = element.removeChild(node)
          3、返回值指向已经被删除的子节点的引用
                 4、当某个子节点被删除时,这个子节点所包含的子节点也被删除掉
                 5、如果想删除一个子节点,但不知道父节点,可以使用parentNode属性
(16)childNodes()
1、返回一个数组,这个数组是由给定节点的子节点组成的。
              2、var nodeList = node.childNodes()
                 3、文本节点和属性节点不可能再包含子节点,所以他们的childNodes()方法返回一个空的数组
                 4、如果想知道这个节点有没有子节点可以利用hasChildNodes方法。
                 5、一个节点的子节点有多少个可以调用数组的length来得到。
                 6、如果这个节点还有子节点,那么这个节点肯定是元素节点
(17)firstChild
        1、该属性返回给定节点的第一个子节点
                 2、var reference = node.firstChild
                 3、文本节点和属性节点不包括任何子节点,所以返回值为null
                 4、node.firstChild=node.childNodes[0]
(18)lastChild
1、该属性返回给定节点的最后一个子节点
        2、var reference = node.lastChild
(19)nextSibling
1. 返回给定节点的下一个兄弟节点
(20)parentNode
1、返回给定元素节点的父节点
        2、document没有父节点
(21)previousSibling
1.返回给定节点的上一个兄弟节点
(22)innerHTML
1. 用来读写某个元素中的HTML内容
(23)window.onload
1、在页面上所有的数据加载完以后触发该方法
            2、这样做的好处是,有时候一些JS函数要用到页面上的一些数据,但是此时有些数据还没有加载进来。
                    这个时候触发函数,就会报一些异常。所以用window.onload方法可以确保数据安全落地。

时间: 2024-12-21 08:11:28

Dom对象的常用方法的相关文章

细看JS中的BOM、DOM对象

DOM对象模型 [DOM树节点] DOM节点分为三大类:元素节点,文本节点,属性节点: 文本节点,属性节点为元素节点的两个子节点: 通过getElment系列方法,可以去到元素节点: [查看节点] 1.getElementById:通过id获取唯一的节点:多个同名ID只会取到第一个: 2.etElementByName:通过name取到一个数组,包含1到多个节点: 使用方式:通过循环取到每个节点,循环次数,从0开始<数组.length [查看设置属性节点] 1.查看属性节点:getAttribu

前端05.js入门之BOM对象与DOM对象。

一.关于BOM对象. BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执行其他与页面内容不直接相关的动作. 用于操控用户浏览器. 1.window对象: 所有浏览器都支持 window 对象. 概念上讲.一个html文档对应一个window对象. 功能上讲: 控制浏览器窗口的. 使用上讲: window对象不需要创建对象,直接使用即可. 下面是window对象的常用方法: alert()            显示带有一段消息和一

JavaScript之DOM-9 HTML DOM(HTML DOM概述、常用HTML DOM对象、HTML表单)

一.HTML DOM 概述 HTML DOM 概述 - HTML DOM 定义了用于 HTML 的一系列标准对象,以及访问和处理 HTML 文档的标准方法 - HTML 标签对象化 - 将网页中的每个元素都看作是一个对象 常用 HTML DOM 对象 标准 DOM 与 HTML DOM - HTML 标签对象化 - createElement - appendChild - setAttribute - removeAttribute - nodeName - ... - HTML DOM 提供

JavaScript基础15——js的DOM对象

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js的DOM对象</title> 6 <script type="text/javascript"> 7 // DOM:Document Object Model 文档对象模型 8 /* 9 文档:超文本文档html.xml 10 对象:提供了属

DOM 对象方法

DOM 对象方法 这里提供一些您将在本教程中学到的常用方法: 方法 描述 getElementById() 返回带有指定 ID 的元素. getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组). getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表. 注:getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效. appendChild() 把新的子

IE与FireFox的DOM对象树差异

 最近在做项目,有复习一下以前JS的关于DOM的知识点,再次小小的总结一下. 以下是DOM对象在IE与FireFox中的一些小区别,就当积累吧. 1.IE会把没有在文档中定义的属性也加入DOM树 2.IE不会把title中的文本内容加入DOM树 3.IE会把换行缩进信息过滤掉,firefox则会认为是有用的文本内容,并作为文本节点的一部分加入DOM树 4.IE不会把Script标签中的内容加入DOM树,FireFox将里面的内容加入DOM树

jQuery DOM对象区别与联系

对两种对象类型的定义,只要能理解并转换成自己的说法就可以,不用死板按照资料所写 jQuery对象(jq对象)其实就是通过jquery类库选择器获得的对象(或者说是通过$获取的对象或者说是通过jquery包装dom对象后产生的对象(可参照下面的对象转换理解)): jquery对象是jquery独有,可以使用jquery里面的方法,但不能使用dom的方法: 示例: $("#img").attr("src", "test.jpg");其中$("

jQuery对象与DOM对象转换

原文链接 http://www.cnblogs.com/ouyangping/p/6439939.html jQuery对象与DOM对象是不一样的 通过一个简单的例子,简单区分下jQuery对象与DOM对象: <p id="imooc"></p> 我们要获取页面上这个id为imooc的div元素,然后给这个文本节点增加一段文字:"hello,world",并且让文字颜色变成红色. 通过标准JavaScript处理: var p = docum

DOM对象和js对象以及jQuery对象的区别

一.DOM对象 文档对象模型简称DOM,是W3C组织推荐的处理可扩展置标语言的标准编程接口. DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的对象.这些对象的行为和属性以及这些对象之间的关系. 通过DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性.可以对其中的内容进行修改和删除,同时也可以创建新的元素. HTML DOM 独立于平台和编程语言.它可被任何编程语言诸如 Java.JavaScript 和 VBScript 使用. DOM对象,即是我们用