简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial js > teks badan

js常用DOM方法详解

高洛峰
Lepaskan： 2017-02-06 09:16:06
asal
1487 orang telah melayarinya

介绍几个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>
Salin selepas log masuk

1.  getElementById 

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

　2.然后输出对象 contentId 就返回id为 contentId  的元素对象（

）。见下图：

js常用DOM方法详解

2.  getElementsByTagName  

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

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

　3.继续 contentTag[0]  输出

　contentTag[1] 输出

js常用DOM方法详解

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

3.  getElementsByClassName 

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

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

　 3. contentClass[0] 输出

js常用DOM方法详解

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

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

js常用DOM方法详解

改变style属性后：

js常用DOM方法详解

5.那么这是childNOdes：

js常用DOM方法详解

也就是说，

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

那如果是呢？

js常用DOM方法详解

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

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

js常用DOM方法详解

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持PHP中文网！

更多 js常用DOM方法详解相关文章请关注PHP中文网！

Label berkaitan：
js DOM 方法
sumber：php.cn
Artikel sebelumnya：JavaScript面向对象精要 Artikel seterusnya：浅谈javascript中的DOM方法
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Bagaimana untuk mencetuskan render (dengan penapis dan penomboran) pada kaedah isihan dalam React? Berikut ialah komponen gaya Sort.js saya: <SortWrapper><SortText>SortBy</So...
daripada 2024-04-06 21:28:37
0
1
2257
Pemeriksa Sudoku tidak berfungsi? Bolehkah sesiapa membantu saya mengenal pasti ralat? Saya mencuba segala-galanya pada editor dalam talian tetapi masih mendapat ralat. Tetapi a...
daripada 2024-04-06 21:21:07
0
1
474
Bagaimana untuk menyelesaikan ruang kosong misteri di bahagian bawah halaman dalam CSS Saya cuba membina halaman web mudah menggunakan Bootstrap dan D3, tetapi saya tidak tahu b...
daripada 2024-04-06 20:22:15
0
1
454
Cara menggunakan komponen laravel dengan ruang letak malas livewire Saya ingin menambah rangka komponen laravel saya di dalam ruang letak livewire3 Perkara ya...
daripada 2024-04-06 20:02:10
0
2
543
Kira jumlah medan dalam jadual lain menggunakan pertanyaan MySQL SQL Saya mempunyai skema seperti ini: Jadual pengguna dengan atribut "user_id" dan &...
daripada 2024-04-06 19:39:29
0
1
441
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！