加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程 > 正文

JavaScript htmldom 元素带来的实用性真是绝了!

发布时间:2021-06-03 20:33:49 所属栏目:编程 来源:互联网
导读:一、找到HTML元素 通常,使用JavaScript,想操作HTML元素。要做到这一点,必须先找到元素。有几种方法可以做到这一点。 找到DOM中的HTML元素的最简单的方法,是

通常,使用JavaScript,想操作HTML元素。要做到这一点,必须先找到元素。有几种方法可以做到这一点。

找到DOM中的HTML元素的最简单的方法,是利用元素的id。

使用id="intro"找到元素 :

var myElement = document.getElementById("intro"); 

如果找到元素,则该方法将返回元素作为对象 (赋值给myElement)。

元素没有被发现,myElement将是空的。

二、通过标签名称找到HTML元素

找到所有<p>元素:

var x = document.getElementsByTagName("p"); 

这个例子使用id="main"找到元素 , 并且在"main"里面找到所有的 <p> 元素:

var x = document.getElementById("main"); 

var y = x.getElementsByTagName("p"); 

三、通过类名称找到HTML元素

如果想找到同一类名称的所有HTML元素,使用getElementsByClassName()。

例:

返回所有class="intro"的元素列表.

var x = document.getElementsByClassName("intro"); 

在Internet Explorer 8和早期版本中,按类名查找元素不起作用。

四、通过CSS选择器找到HTML元素

如果想找到所有的HTML元素,匹配指定的CSS选择器 (id, 类名, 类型, 属性, 属性值, 等等), 使用querySelectorAll() 方法。

此示例返回所有class="intro"的

元素列表。

var x = document.querySelectorAll("p.intro"); 

querySelectorAll() 方法在Internet Explorer 8和早期版本中不起作用。

五、通过HTML对象集合找到HTML元素

此示例查找id="frm1"的表单元素,在表单集合里,并显示所有的颜色值。

var x = document.forms["frm1"]; 

var text = ""; 

var i; 

for (i = 0; i < x.length; i++) { 

   text += x.elements[i].value + "<br>"; 

document.getElementById("demo").innerHTML = text; 

下面的HTML对象(或对象的集合)也可访问:

1. document.anchors

<!DOCTYPE html> 

<html lang="en"> 

<head> 

<meta charset="UTF-8"> 

<title>项目</title> 

</head> 

<body style="background-color: aqua;"> 

 

<a name="html">HTML Tutorial</a><br> 

<a name="css">CSS Tutorial</a><br> 

<a name="xml">XML Tutorial</a><br> 

 

<p id="demo"></p> 

 

<script> 

document.getElementById("demo").innerHTML = 

"Number of anchors are: " + document.anchors.length; 

</script> 

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读