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.:也是获取元素第一个子节点值的意思

时间: 2024-08-29 12:51:32

DOM 对象方法的相关文章

jQuery DOM对象区别与联系

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

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

1.分析源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C

jQuery 将选中的对象转化为原始的DOM对象

在jQuery中,在一个页面上选择元素返回的集合是jQuery对象而不是原始的DOM对象. 所以只能运行jQuery方法. 如果要在选择集上运行DOM方法和属性,该集合必须转化为DOM对象 比如你不可以这样使用: $('div').innerHTML = "hello world"; 因为innerHTML是 DOM的属性而不是jQuery对象的属性.如果确实想这么做.那么就需要将jQuery对象转化为DOM对象.方法有两种. ①jQuery提供一种核心方法get(),所以上面的可以写

前端学习——选择结果为JQuery对象还是DOM对象?

0.前言 在学习和使用javascript过程中经常使用JQuery的选择器,但是在获取到选择结果之后经常"犯迷糊",需要一个DOM对象时或者一个JQuery对象,这样的尴尬经常遇到.为了让自己不再迷糊通过博文总结经验教训,希望自己在总结过程中缓慢提高. [相关博文] [前端学习--如何修改<a href="#">url name</a> 使用javascript和JQuery] [示例页面]--test-ul.html <!DOCTY

[jQuery]jQuery和DOM对象(三)

iQuery和DOM对象 用原生js获取来的对象就是DOM对象 // 1. DOM对象 var myDiv = document.get.querySelector('div'); // myDiv 是DOM对象 // 输出 console.dir(myDiv); jQuery对象 // 2. jQuery对象 $('div'); // jQuery对象 console.dir($('div')); jQuery对象的本质是: 利用$对DOM对象包装后产生的对象(伪数组形式存储) // 3. j

jquery和dom对象相互转化的方法

jQuery对象转成DOM对象: 两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index); (1)jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象. 如:var $v =$("#v") ; //jQuery对象 var v=$v[0]; //DOM对象 alert(v.checked) //检测这个checkbox是否被选中 (2)jQuery本身提供,通过.get(index)方法,得到相应的DOM对象 如:va

HTML DOM对象的属性和方法

HTML DOM对象的属性和方法 HTML DOM 对象有几种类型: 1.Document 类型 在浏览器中,Document 对象表示整个 HTML 文档. 1.1属性 引用文档的子节点 documentElement var html = document.documentElement; //取得对<html>元素的引用 body var body = document.body; //取得对<body>元素的引用 获取文档信息 title 通过 title 属性可以访问当前

HTML DOM对象的属性和方法介绍(原生JS方法)

HTML DOM对象的属性和方法介绍 DOM 是 Document Object Model(文档对象模型)的缩写. DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口),它允许程序和脚本动态地访问和更新文档的内容,结构和样式. W3C DOM 标准被分为 3 个不同的部分: 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对 HTML 文档的标准模型 HTML DOM 定义了所有 HTML 元

研究 Table DOM对象的属性和方法

[课程]web2.0程序设计[作业要求]建立一个网页,放置一个 table 元素和一个 Input 按钮,研究 Table DOM对象的属性和方法,用 JavaScript 实现 Table 插入行.删除行.交换两行内容.(仅使用 DOM 原生对象,且适用 IE 和 Chrome)[参考文档]table dom 参考手册 1.首先按照要求,建立一个网页 Test Table Dom(a table about fruits),假设功能是用来储存一家水果店的账单吧,存有水果店的水果和相应价钱,老板