DOM 对象方法

这里提供一些您将在本教程中学到的常用方法:

方法

描述

getElementById()

返回带有指定 ID 的元素。

getElementsByTagName()

返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。

getElementsByClassName()

返回包含带有指定类名的所有元素的节点列表。

注:getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。

appendChild()

把新的子节点添加到指定节点。

removeChild()

删除子节点。

replaceChild()

替换子节点。

insertBefore()

在指定的子节点前面插入新的子节点。

createAttribute()

创建属性节点。

createElement()

创建元素节点。

createTextNode()

创建文本节点。

getAttribute()

返回指定的属性值。

setAttribute()

把指定属性设置或修改为指定的值。

例:返回包含文档中所有 <p> 元素的列表,并且这些 <p> 元素应该是 id="main" 的元素的后代(子、孙等等):

  1. document.getElementById("main").getElementsByTagName("p");

例:按钮点击时改变body背景颜色

  1. <input type="button"
  2. onclick="document.body.style.backgroundColor='lavender';"
  3. value="改变背景色">
  4.  
  5. /*在本例中用函数执行如下:*/
  1. <script>
  2. function ChangeBackground()
  3. {
  4. document.body.style.backgroundColor="lavender";
  5. }
  6. </script>
  7.  
  8. <input type="button" onclick="ChangeBackground()"
  9. value="Change background color" />

DOM 根节点

这里有两个特殊的属性,可以访问全部文档:

  • document.documentElement - 全部文档
  • document.body - 文档的主体

例:弹出对话框内容为body下所有内容

  1. <p>Hello World!</p>
  2. <div>
  3. <p>DOM 很有用!</p>
  4. <p>本例演示 <b>document.body</b> 属性。</p>
  5. </div>
  6.  
  7. <script>
  8. alert(document.body.innerHTML);
  9. </script>

例:弹出对话框内容为某ID下所有内容

  1. alert(document.getElementById("ceshi").innerHTML);

childNodes 和 nodeValue

除了 innerHTML 属性,您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。

例:下面的代码获取 id="intro" 的 <p> 元素的值:

  1. txt=document.getElementById("intro").childNodes[0].nodeValue;
  2. document.write(txt);

x.firstchild.data:获取元素第一个子节点的数据,

x.childNodes[0]::获取元素第一个子节点;

x.childNodes[0].nodeValue.:也是获取元素第一个子节点值的意思

DOM 对象方法的更多相关文章

  1. HTML DOM 对象 - 方法和属性

    一些常用的 HTML DOM 方法: getElementById(id) - 获取带有指定 id 的节点(元素) appendChild(node) - 插入新的子节点(元素) removeChil ...

  2. jQuery对象和DOM对象转换,解决jQuery对象不能使用js方法的问题

    有时候想要jQuery对象使用js方法,但是jQuery对象是什么js方法都不能用,怎么办呢?方法其实很简单,只要转换jQuery和DOM对象就可以了. 方法一: var $cr = $(" ...

  3. JavaScript DOM对象和JQuery对象相互转换

    1.分析源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  4. jQuery DOM对象区别与联系

    对两种对象类型的定义,只要能理解并转换成自己的说法就可以,不用死板按照资料所写 jQuery对象(jq对象)其实就是通过jquery类库选择器获得的对象(或者说是通过$获取的对象或者说是通过jquer ...

  5. Dom对象和jQuery对象的相互转化

    01.jQuery对象 1.jQuery对象就是通过对jQuery包装dom对象后产生的对象. 2.虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DO ...

  6. [jQuery]jQuery和DOM对象(三)

    iQuery和DOM对象 用原生js获取来的对象就是DOM对象 // 1. DOM对象 var myDiv = document.get.querySelector('div'); // myDiv ...

  7. jquery 获取多个dom对象的方法

    $("[name=trade]").each(function(){ for(j=0;j<info.trade.length;j++){ if( $(this).val() ...

  8. JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)

    一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...

  9. HTML DOM对象的属性和方法

    HTML DOM对象的属性和方法 HTML DOM 对象有几种类型: 1.Document 类型 在浏览器中,Document 对象表示整个 HTML 文档. 1.1属性 引用文档的子节点 docum ...

随机推荐

  1. 常用的DNS

    中国互联网络中心(推荐,安全又快速):1.2.4.8.210.2.4.8.101.226.4.6(电信及移动).123.125.81.6(联通)阿里DNS:223.5.5.5.223.6.6.6goo ...

  2. Linux服务器学习(一)

    一.首先连接服务器 下载一个windows下连接linux的ssh工具,我这里用的putty.一次填入HostName(主机名,可以是服务器域名也可以是对应的ip).Port(端口号默认为22).Co ...

  3. NOIP模拟:切蛋糕(数学欧拉函数)

    题目描述  BG 有一块细长的蛋糕,长度为 n. 有一些人要来 BG 家里吃蛋糕, BG 把蛋糕切成了若干块(整数长度),然后分给这些人. 为了公平,每个人得到的蛋糕长度和必须相等,且必须是连续的一段 ...

  4. Docker for windows10 配置镜像加速

    windows玩docker的时候,经常碰到这种问题: Error response from daemon: Get https://registry-1.docker.io/v2/: net/ht ...

  5. [js] webgl 初探 - 绘制三角形

    摘要: 1. webgl 概念挺多的, 顶点着色器.片段着色器, 坐标 2. 绘制前期准备工作好多 目前看的比较好的教材: https://developer.mozilla.org/zh-CN/do ...

  6. 【JAVASCRIPT】json 与 string

    1. 互相转换 JSON.stringify(jsonobj) json对象转化为string JSON.parse(string) string转化为json,注意{“name”:"hxy ...

  7. phpunit实践笔记

    phpunit成为单元测试的代名词已成为共识, 但很多在实际编写测试过程中遇到的很多问题通过手册.网上搜索都很难找到相关资料, 大部分都得通过查看源代码和实践的代码经验解决.欢迎大家拍砖.(在此之前请 ...

  8. Python 获取当前路径的方法

    Python2.7 中获取路径的各种方法 sys.path 模块搜索路径的字符串列表.由环境变量PYTHONPATH初始化得到. sys.path[0]是调用Python解释器的当前脚本所在的目录. ...

  9. WordPress中函数钩子hook的作用及基本用法

    WordPress 的插件机制实际上只的就是这个 Hook 了,它中文被翻译成钩子,允许你参与 WordPress 核心的运行,是一个非常棒的东西,下面我们来详细了解一下它.钩子分类 钩子分为两种,一 ...

  10. python 文件打开小知识

    一个文件被打开后,你有一个file对象,你可以得到有关该文件的各种信息. file.name : 返回文件的名称 file.closed: 文件关闭返回值为True,否则为False file.mod ...