Dom对象的经常用法:
(1)getElementById() 查询给定ID属性值的元素,返回该元素的元素节点
1、  查询给定ID属性值的元素,返回该元素的元素节点。也称为元素对象。
                2、  由于在一个html页面中id的值是唯一的。所以返回值也是唯一的。

所以方法的名称为getElementById()而不是getElementsById()
                3、  该方法仅仅能用于document对象,相似与java的statickeyword。

(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方法能够确保数据安全落地。

Dom对象的经常用法的更多相关文章

  1. DOM Style样式对象的详细用法

    DOM Style样式对象的详细用法 HTML Style样式比较复杂,相应访问.修改方法也有所差异.参考相关资料,整理如下. 典型Html文件如下,有三种定义方式. <head>     ...

  2. [jQuery学习系列一]1-选择器与DOM对象

    前言: 好久没有更新博客了, 最近想复习下 之前学过的JS的相关内容, 也算是自己的一种总结. 知识长时间不用就会忘记, 多学多记多用!! 下面的程序都可以在下面的网站进行在线调试: http://w ...

  3. Dom对象和JQuery对象的详细介绍及其区别

    一直搞不清Dom对象和JQuery对象之间的区别,今天好好总结下 1.dom对象(摘抄自百度百科http://baike.baidu.com/link?url=4L8bZ7kW6kE-it4F-1LU ...

  4. JS中的DOM对象及JS对document对像的操作

    DOM对象 windows:属性:opener(打开者) 方法:open().close(),setTimeout().setInterval()... location:属性:href 方法:rel ...

  5. javascipt中的DOM对象

    1.HTML中DOM对象的概念 HTML Document Object Model(文档对象模型) HTML DOM定义了访问和操作HTML文档的标准方法 HTML DOM把HTML文档呈现为带有元 ...

  6. 第四章 JavaScript操作DOM对象

    第四章   JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...

  7. jQuery对象与DOM对象之间的转换(转)

    原文:https://www.cnblogs.com/lsy0403/p/5907084.html 什么是DOM对象 使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象.比如使用 ...

  8. jQuery对标签、类样式、值、文档、DOM对象的操作

    jquery的标签属性操作 使用attr()方法对html标签属性进行操作,attr如果参数是一个参数,表示获取html标签的属性值,如果是两个参数则是设置标签属性名以及对象的属性值 .prop()适 ...

  9. jQuery基础(样式篇,DOM对象,选择器,属性样式)

      1. $(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真 ...

随机推荐

  1. Mysql 访问远程数据库,报错:1130-host ... is not allowed to connect to this MySql server 开放mysql远程连接 不使用localhost

    参考:http://www.cnblogs.com/xyzdw/archive/2011/08/11/2135227.html 解决方法: 1. 改表法. 可能是你的帐号不允许从远程登陆,只能在loc ...

  2. JavaSE-01 认识Java

    01  认识Java 学习要点 程序的概念 Java技术内容 使用记事本开发简单的java程序 使用输出语句在控制台输出信息 熟悉Eclipse开发环境 程序的概念 源自生活 例如五一节计划:春光明媚 ...

  3. 核心动画中的几种layer

    第10章其他有用的层 免责申明(必读!):本博客提供的所有教程的翻译原稿均来自于互联网,仅供学习交流之用,切勿进行商业传播.同时,转载时不要移除本申明.如产生任何纠纷,均与本博客所有人.发表该翻译稿之 ...

  4. [JOYOI] 1415 西瓜种植

    题目描述 笨笨种了一块西瓜地,但这块西瓜地的种植范围是一条直线的-- 笨笨在一番研究过后,得出了m个结论,这m个结论可以使他收获的西瓜最多. 笨笨的结论是这样的: 从西瓜地B处到E处至少要种植T个西瓜 ...

  5. Jenkins中部署Sonar代码检查

    1 安装并启动sonarqube docker pull sonarqube:7.5-community docker run \ --name sonarqube \ --network ci \ ...

  6. CSRF verification failed. Request aborted. 表单提交方法为POST时的报错

    本人所用Django版本为1.11,在设置请求方法为POST时,遇到标题中的错误,尝试了多种方法,最终通过下面的操作来修复: 在template文件中添加图中红框部分 接着,导入csrf_exempt ...

  7. ul标签中,li标签的移除、属性值获取

  8. SSH常见问题集锦

    /WEB-INF/web.xml Web应用程序配置文件,描述了 servlet 和其他的应用组件配置及命名规则. /WEB-INF/classes/包含了站点所有用的 class 文件,包括 ser ...

  9. 公钥加密算法那些事 | RSA 与 ECC 系统对比

    一.背景 据记载,公元前 400 年,古希腊人发明了置换密码.1881 年世界上的第一个电话保密专利出现.在第二次世界大战期间,德国军方启用「恩尼格玛」密码机,密码学在战争中起着非常重要的作用. 随着 ...

  10. HDU 4641

    动态更新后缀自动机,每次不断依据当前添加的节点不断往前寻找父节点上字符串最多可出现的次数 这里为了减少运算,当父节点已经达到k次就不在往前寻找,因为之前的必然达到k次,也已经统计在内 #include ...