Rumah hujung hadapan web tutorial js javascript针对DOM的应用分析(二)_DOM

javascript针对DOM的应用分析(二)_DOM

May 16, 2016 pm 05:54 PM
dom

其实在原生的也JS也有这些属性。和JQ几乎相同但是比JQ少一些。但是用起来却比JQ麻烦一点。主要因为FF浏览器,因为FF会把你的换行也当做一个DOM元素。比如说

复制代码 代码如下:






我用原生的JS获取ID为dom的元素下的子元素。用我第一章说的方法就是var a = document.getElementById("dom").getElementsByTagName("div");这个没问题。可以alert(a.length)提示会是2,但是我们现在换一种方法获取就是我上章提到的var b = document.getElementById("dom").childNodes;如果这样alert(b.length)IE浏览器上没问题还是2,但是在FF浏览器上会提示是4,这就是因为FF把换行也当做一个元素了。
所以我们必须处理一下才能用JS的那些属性。处理思想很简单就是遍历一下这些元素。把元素类型为空格而且是文本都删除。处理函数是这样的
复制代码 代码如下:

function del_space(elem){
var elem_child = elem.childNodes;
for(var i=0;iif(elem_child.nodeName == "#text" && !/\S/.test(elem_child.nodeValue))
{elem.removeChild(elem_child)}
}}

我解释一下这个函数
var elem_child = elem.childNodes;
把传进来的elem元素的子元素都扔给elem_child;
复制代码 代码如下:

for(var i=0;iif(elem_child.nodeName == "#text" && !/\S/.test(elem_child.nodeValue))
{elem.removeChild(elem_child)}
}

遍历这些子元素。如果这些元素里面有节点类型是文本并且这个文本类型节点的节点值是空的。就把它删除

(nodeName是JS里的一个属性,得到这个节点的节点类型,/\S/这个是非空字符在JS里的正规表达式。前面加一个感叹号就表示是空字符。test是JS的一个方法,就是把它里面的东西和外面的东西对比一下。nodeValue表示得到这个节点里的值removeChild也是个方法就删除外面这个元素的某个子元素)

这样只需要在调用这些属性之前调用这个函数把空格清理一下就能放心用了比如
复制代码 代码如下:






<script> <BR>function dom(){ <BR>var a = document.getElementById("dom"); <BR>del_space(a);调用清理空格的函数 <BR>var b = a.childNodes;获取a的全部子节点; <BR>var c = a.parentNode;获取a的父节点; <BR>var d = a.nextSbiling;获取a的下一个兄弟节点 <BR>var e = a.previousSbiling;获取a的上一个兄弟节点 <BR>var f = a.firstChild;获取a的第一个子节点 <BR>var g = a.lastChild;获取a的最后一个子节点 <br><br>} <BR></script>

(另外说下。var b = a.childNodes;获取的也是一个数组;所以比如我要用第一个节点就是childNodes[0];我要用第二个节点就是childNodes[1];以此类推)

到这里获取DOM方面就算是结束了。下章就教大家如何操作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

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apakah cara untuk mendapatkan nod DOM dalam Vue3 Apakah cara untuk mendapatkan nod DOM dalam Vue3 May 11, 2023 pm 04:55 PM

Apakah cara untuk mendapatkan nod DOM dalam Vue3

Panduan manipulasi DOM dalam PHP Panduan manipulasi DOM dalam PHP May 21, 2023 pm 04:01 PM

Panduan manipulasi DOM dalam PHP

Apakah maksud vue dom? Apakah maksud vue dom? Dec 20, 2022 pm 08:41 PM

Apakah maksud vue dom?

Apakah sebab mengapa ref mengikat dom atau komponen gagal dalam vue3 dan cara menyelesaikannya Apakah sebab mengapa ref mengikat dom atau komponen gagal dalam vue3 dan cara menyelesaikannya May 12, 2023 pm 01:28 PM

Apakah sebab mengapa ref mengikat dom atau komponen gagal dalam vue3 dan cara menyelesaikannya

Apakah objek dom dan bom? Apakah objek dom dan bom? Nov 13, 2023 am 10:52 AM

Apakah objek dom dan bom?

Apakah perbezaan antara bom dan dom Apakah perbezaan antara bom dan dom Nov 13, 2023 pm 03:23 PM

Apakah perbezaan antara bom dan dom

Ringkasan terkini acara DOM JavaScript biasa! Ringkasan terkini acara DOM JavaScript biasa! Aug 07, 2022 am 11:05 AM

Ringkasan terkini acara DOM JavaScript biasa!

Apakah objek terbina dalam DOM? Apakah objek terbina dalam DOM? Dec 19, 2023 pm 03:45 PM

Apakah objek terbina dalam DOM?

See all articles