关于dom的一些基础知识-来自w3shool.com.cn

最新推荐文章于 2024-04-19 15:12:15 发布

JDecay

最新推荐文章于 2024-04-19 15:12:15 发布

阅读量1.4k

点赞数

分类专栏： javascript

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍JavaScript操作HTML元素、属性及样式的多种方法，包括通过id、标签名或类名查找元素，修改元素内容、属性及样式，响应事件，以及创建、删除元素等。此外还介绍了JavaScript对象的创建、属性与方法的访问，以及常用内置对象的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素
```
document.getElementById("id")
```
通过标签名找到 HTML 元素
```
getElementsByTagName("TagName")
```
通过类名找到 HTML 元素

改变 HTML 内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=new value

实例

本例改变了 <img> 元素的 src 属性：

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

改变 HTML 样式

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=new style

Style 对象的属性：

http://www.w3school.com.cn/jsref/dom_obj_style.asp

使用 HTML DOM 来分配事件

HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件：

实例

向 button 元素分配 onclick 事件：

<button id="myBtn">点击这里</button>

<script>
document.getElementById("myBtn").οnclick= function(){displayDate()}; --注意表达方式
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

实例

<body οnlοad="checkCookies()">

onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

实例

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

实例

<body>

<div οnmοuseοver="mOver(this)" οnmοuseοut="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}

function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>

</body>

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

创建新的 HTML 元素

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

实例

<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>

<script>
var para=document.createElement("p");  //创建新节点
var node=document.createTextNode("这是新段落。");  //创建新的内容节点
para.appendChild(node);  //将新创建的内容节点挂到新节点上

var element=document.getElementById("div1");  //获得div节点，这个是要挂在的节点的父节点
element.appendChild(para);  //将新节点挂在他的父节点上
</script>

删除已有的 HTML 元素

如需删除 HTML 元素，您必须首先获得该元素的父元素：

实例

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent=document.getElementById("div1");	//获得父节点
var child=document.getElementById("p1");	//获得子节点
parent.removeChild(child);	//利用父节点，删除子节点
</script>

只获得子节点也可以

提示：如果能够在不引用父元素的情况下删除某个元素，就太好了。

不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。

这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

JavaScript 对象

对象只是带有属性和方法的特殊数据类型。

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。

访问对象的属性

属性是与对象相关的值。

访问对象属性的语法是：

objectName.propertyName

比如：

var s = "abcd";

document.write(s.length); //s.length就是s的属性

访问对象的方法

方法是能够在对象上执行的动作。

您可以通过以下语法来调用方法：

objectName.methodName()

这个例子使用了 String 对象的 toUpperCase() 方法来将文本转换为大写：

var message="Hello world!";
var x=message.toUpperCase();

创建 JavaScript 对象

通过 JavaScript，您能够定义并创建自己的对象。

创建新对象有两种不同的方法：

定义并创建对象的实例
使用函数来定义对象，然后创建新的对象实例

创建直接的实例 //方法1

这个例子创建了对象的一个新实例，并向其添加了四个属性：

实例

person=new Object();	//创建一个对象
person.firstname="Bill";	//给对象的属性赋值，说对象有什么属性就有什么属性
person.lastname="Gates";	//这个还是挺nb的。不需要像java那样先定义类模板
person.age=56;
person.eyecolor="blue";

替代语法（使用对象 literals）： //方法1的变体

实例

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};	//像定义数组一样。。。。

使用对象构造器 //方法2

本例使用函数来构造对象： //相当于写一个构造函数，然后调用构造函数来创建对象

实例

var myFather=new person("Bill","Gates",56,"blue");	//调用构造函数创建对象
var myMother=new person("Steve","Jobs",48,"green");

document.write(myFather.firstname + " is " + myFather.age + " years old.");
</script>

把属性添加到已经存在的 JavaScript 对象中

直接添加即可

person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

x=person.firstname;

把方法添加到 JavaScript 对象

方法只不过是附加在对象上的函数。

在构造器函数内部定义对象的方法： //在构造方法中添加方法，这个也挺神奇的哈。。。

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;

this.changeName=changeName;
function changeName(name)
{
this.lastname=name;
}
}

JavaScript for...in 循环 //遍历对象中的所有属性

JavaScript for...in 语句循环遍历对象的属性。

实例

循环遍历对象的属性：

var person={fname:"Bill",lname:"Gates",age:56};	//定义一个对象
var txt="";
for (x in person)	//遍历这个对象的所有属性，注意表达方式,x代表的是person中属性的序号
  {
  txt=txt + person[x];//这样表达类似于数组了，经测试，是可以的。
  }

JavaScript 数字

JavaScript 数字可以使用也可以不使用小数点来书写：

实例

var pi=3.14;    // 使用小数点
var x=34;       // 不使用小数点

极大或极小的数字可通过科学（指数）计数法来写：

实例

var y=123e5;    // 12300000	//后面有多少个0
var z=123e-5;   // 0.00123	//小数点后面有多少位有效数字

精度

整数（不使用小数点或指数计数法）最多为 15 位。

小数的最大位数是 17，但是浮点运算并不总是 100% 准确：

实例

八进制和十六进制

如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 "x"，则解释为十六进制数。

实例

var y=0377;
var z=0xFF;

数字属性和方法

属性：

MAX VALUE
MIN VALUE
NEGATIVE INFINITIVE
POSITIVE INFINITIVE
NaN
prototype
constructor

方法：

toExponential()
toFixed()
toPrecision()
toString()
valueOf()

这个网址给出了如上Number的属性和方法的用法，需要时可以学习一下。

http://www.w3school.com.cn/jsref/jsref_obj_number.asp

JavaScript String（字符串）对象

这个网址给出了 String的实例对象的属性和方法的用法。差不多都会。需要着重学习的是替换和搜索方法中的正则表达式的使用

http://www.w3school.com.cn/jsref/jsref_obj_string.asp

JavaScript Date（日期）对象

定义日期

Date 对象用于处理日期和时间。

可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象：

var myDate=new Date()

注释：Date 对象自动使用当前的日期和时间作为其初始值。

操作日期

通过使用针对日期对象的方法，我们可以很容易地对日期进行操作。

在下面的例子中，我们为日期对象设置了一个特定的日期 (2008 年 8 月 9 日)：

var myDate=new Date()
myDate.setFullYear(2008,7,9)		//这个例子有点意思，虽然没什么用吧。。。

注意：表示月份的参数介于 0 到 11 之间。也就是说，如果希望把月设置为 8 月，则参数应该是 7

在下面的例子中，我们将日期对象设置为 5 天后的日期：

var myDate=new Date()
myDate.setDate(myDate.getDate()+5)

注意：如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。

比较日期

日期对象也可用于比较两个日期。 //日期也可以比较

这个网址是日期的属性和方法的使用方法。可以进一步学习时使用。

http://www.w3school.com.cn/jsref/jsref_obj_date.asp

定义数组

数组对象用来在单独的变量名中存储一系列的值。

我们使用关键词 new 来创建数组对象。下面的代码定义了一个名为 myArray 的数组对象：

var myArray=new Array()

有两种向数组赋值的方法（你可以添加任意多的值，就像你可以定义你需要的任意多的变量一样）。

1:

var mycars=new Array()
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"

也可以使用一个整数自变量来控制数组的容量：

var mycars=new Array(3)
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"

2:

var mycars=new Array("Saab","Volvo","BMW")

数组的值也可以用for in的方法遍历，如同对象的属性一样

这个网址是数组的属性和方法的使用方法。可以进一步学习时使用。