最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

js常用DOM方法详解

来源:懂视网 责编:小采 时间:2020-11-27 20:25:40
文档

js常用DOM方法详解

js常用DOM方法详解:介绍几个js DOM的常用方法获取元素节点 getElementById getElementsByTagName getElementsByClassName先写一个简单的网页做测试:/* test.html */ <!DOCTYPE html> <html> <head> <meta
推荐度:
导读js常用DOM方法详解:介绍几个js DOM的常用方法获取元素节点 getElementById getElementsByTagName getElementsByClassName先写一个简单的网页做测试:/* test.html */ <!DOCTYPE html> <html> <head> <meta
介绍几个js DOM的常用方法

获取元素节点 getElementById getElementsByTagName getElementsByClassName

先写一个简单的网页做测试:

/*
  test.html
*/
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>test</title>
</head>
<body>
 <p id="contentId" style="width:500px; height: 30px;background-color: #ccc">这段的id是contentId。</p>
 <p class="contentClass" style="width:500px; height: 30px;background-color: #ccc">这段的class name是contentClass。</p>
</body>
</html>

1. getElementById

 1.先定义变量 var contentId = document.getElementById("contentId");

 2.然后输出对象 contentId 就返回id为 contentId 的元素对象( <p id="contentId" style="width:500px; height: 30px;background-color: #ccc"> )。见下图:

 js常用DOM方法详解

2. getElementsByTagName

1.还是先定义变量 var contentTag = document.getElementsByTagName("p");

 2.接着我输出 contentTag ,它返回 HTMLCollection [ <p#contentId>, <p.contentClass> ] 共两个,一个以#开头表示id,另一个以.开头表示Class name。

 3.继续 contentTag[0] 输出 <p id="contentId" style="width:500px; height: 30px;background-color: #ccc">

 contentTag[1] 输出 <p class="contentClass" style="width:500px; height: 30px;background-color: #ccc">

 js常用DOM方法详解

由此可知 getElementsByTagName 返回的是数组!

3. getElementsByClassName

 1. var contentClass = document.getElementsByClassName("contentClass");

  2. contentClass 输出 HTMLCollection [ <p.contentClass> ] 返回一个元素对象数组,即使只有一个。

  3. contentClass[0] 输出 <p class="contentClass" style="width:500px; height: 30px;background-color: #ccc">

 js常用DOM方法详解

我们常用的还有 getAttribute,setAttribute,ChildNodes, nodeType, nodeValue, firstChild, lastChild 方法获取一些信息。

4.分别用 getAttribute 和 setAttribute 获取和设置属性:

 js常用DOM方法详解

改变style属性后:

 js常用DOM方法详解

5.那么这是childNOdes:

 js常用DOM方法详解

也就是说, <p></p> 在遇到块元素时,块元素之间会有一个换行符 <br> ,浏览器在查找子节点时会将它视为一个文本节点。从图中也可以看出 childNodes 返回的也是数组。

那如果是<p#contentId>呢?

 js常用DOM方法详解

nodeType 的值有12种,常用的也就三种:1表示元素节点,2表示属性节点,3表示文本节点。

nodeValue 不仅可以获取文本节点的值,还可以改变文本节点的值。

 js常用DOM方法详解

文档

js常用DOM方法详解

js常用DOM方法详解:介绍几个js DOM的常用方法获取元素节点 getElementById getElementsByTagName getElementsByClassName先写一个简单的网页做测试:/* test.html */ <!DOCTYPE html> <html> <head> <meta
推荐度:
标签: 常用 方法 讲解
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top