DOM 对象方法
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" 的元素的后代(子、孙等等):
- document.getElementById("main").getElementsByTagName("p");
例:按钮点击时改变body背景颜色
- <input type="button"
- onclick="document.body.style.backgroundColor='lavender';"
- value="改变背景色">
- /*在本例中用函数执行如下:*/
- <script>
- function ChangeBackground()
- {
- document.body.style.backgroundColor="lavender";
- }
- </script>
- <input type="button" onclick="ChangeBackground()"
- value="Change background color" />
DOM 根节点
这里有两个特殊的属性,可以访问全部文档:
- document.documentElement - 全部文档
- document.body - 文档的主体
例:弹出对话框内容为body下所有内容
- <p>Hello World!</p>
- <div>
- <p>DOM 很有用!</p>
- <p>本例演示 <b>document.body</b> 属性。</p>
- </div>
- <script>
- alert(document.body.innerHTML);
- </script>
例:弹出对话框内容为某ID下所有内容
- alert(document.getElementById("ceshi").innerHTML);
childNodes 和 nodeValue
除了 innerHTML 属性,您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。
例:下面的代码获取 id="intro" 的 <p> 元素的值:
- txt=document.getElementById("intro").childNodes[0].nodeValue;
- document.write(txt);
x.firstchild.data:获取元素第一个子节点的数据,
x.childNodes[0]::获取元素第一个子节点;
x.childNodes[0].nodeValue.:也是获取元素第一个子节点值的意思
DOM 对象方法的更多相关文章
- HTML DOM 对象 - 方法和属性
一些常用的 HTML DOM 方法: getElementById(id) - 获取带有指定 id 的节点(元素) appendChild(node) - 插入新的子节点(元素) removeChil ...
- jQuery对象和DOM对象转换,解决jQuery对象不能使用js方法的问题
有时候想要jQuery对象使用js方法,但是jQuery对象是什么js方法都不能用,怎么办呢?方法其实很简单,只要转换jQuery和DOM对象就可以了. 方法一: var $cr = $(" ...
- JavaScript DOM对象和JQuery对象相互转换
1.分析源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- jQuery DOM对象区别与联系
对两种对象类型的定义,只要能理解并转换成自己的说法就可以,不用死板按照资料所写 jQuery对象(jq对象)其实就是通过jquery类库选择器获得的对象(或者说是通过$获取的对象或者说是通过jquer ...
- Dom对象和jQuery对象的相互转化
01.jQuery对象 1.jQuery对象就是通过对jQuery包装dom对象后产生的对象. 2.虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DO ...
- [jQuery]jQuery和DOM对象(三)
iQuery和DOM对象 用原生js获取来的对象就是DOM对象 // 1. DOM对象 var myDiv = document.get.querySelector('div'); // myDiv ...
- jquery 获取多个dom对象的方法
$("[name=trade]").each(function(){ for(j=0;j<info.trade.length;j++){ if( $(this).val() ...
- JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)
一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...
- HTML DOM对象的属性和方法
HTML DOM对象的属性和方法 HTML DOM 对象有几种类型: 1.Document 类型 在浏览器中,Document 对象表示整个 HTML 文档. 1.1属性 引用文档的子节点 docum ...
随机推荐
- 常用的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 ...
- Linux服务器学习(一)
一.首先连接服务器 下载一个windows下连接linux的ssh工具,我这里用的putty.一次填入HostName(主机名,可以是服务器域名也可以是对应的ip).Port(端口号默认为22).Co ...
- NOIP模拟:切蛋糕(数学欧拉函数)
题目描述 BG 有一块细长的蛋糕,长度为 n. 有一些人要来 BG 家里吃蛋糕, BG 把蛋糕切成了若干块(整数长度),然后分给这些人. 为了公平,每个人得到的蛋糕长度和必须相等,且必须是连续的一段 ...
- Docker for windows10 配置镜像加速
windows玩docker的时候,经常碰到这种问题: Error response from daemon: Get https://registry-1.docker.io/v2/: net/ht ...
- [js] webgl 初探 - 绘制三角形
摘要: 1. webgl 概念挺多的, 顶点着色器.片段着色器, 坐标 2. 绘制前期准备工作好多 目前看的比较好的教材: https://developer.mozilla.org/zh-CN/do ...
- 【JAVASCRIPT】json 与 string
1. 互相转换 JSON.stringify(jsonobj) json对象转化为string JSON.parse(string) string转化为json,注意{“name”:"hxy ...
- phpunit实践笔记
phpunit成为单元测试的代名词已成为共识, 但很多在实际编写测试过程中遇到的很多问题通过手册.网上搜索都很难找到相关资料, 大部分都得通过查看源代码和实践的代码经验解决.欢迎大家拍砖.(在此之前请 ...
- Python 获取当前路径的方法
Python2.7 中获取路径的各种方法 sys.path 模块搜索路径的字符串列表.由环境变量PYTHONPATH初始化得到. sys.path[0]是调用Python解释器的当前脚本所在的目录. ...
- WordPress中函数钩子hook的作用及基本用法
WordPress 的插件机制实际上只的就是这个 Hook 了,它中文被翻译成钩子,允许你参与 WordPress 核心的运行,是一个非常棒的东西,下面我们来详细了解一下它.钩子分类 钩子分为两种,一 ...
- python 文件打开小知识
一个文件被打开后,你有一个file对象,你可以得到有关该文件的各种信息. file.name : 返回文件的名称 file.closed: 文件关闭返回值为True,否则为False file.mod ...