深入理解JavaScript的DOM应用

最新推荐文章于 2021-03-22 10:00:00 发布

郄子硕-langgeligelang

最新推荐文章于 2021-03-22 10:00:00 发布

阅读量222

点赞数

分类专栏：【B/S】文章标签： DOM

本文链接：https://blog.csdn.net/q290994/article/details/80974996

版权

【B/S】专栏收录该内容

11 篇文章 0 订阅

订阅专栏

这次带来的是JavaScript的DOM应用，搜罗了个别案例，一起来学习一下吧。

什么是DOM :
document .节点! 其实说的都是一个东西, CSS时管叫标签, JS时管叫元素,DOM时,管叫节点;

DOM节点

childNodes:子节点
nodeType:节点的类型
- nodeType == 3 -> 文本节点
- nodeType == 1 -> 元素节点

下面是一则关于DOM的例子

childNodes 和 nodeType配合使用

<head>    <meta charset="UTF-8">
    <title>DOM基础</title>
    <script>
        window.onload = function () {            //ul的子节点为li
            var oUl = document.getElementById('ul1');
            for(var i=0;i<oUl.childNodes.length;i++){    
            //由于在不同的浏览器下,获取到的oUl.childNodes是不一样的;IE6-8会将文本节点也算进去;
                //故若想给元素节点修改样式,可以通过 oUl.childNodes[i].nodeType == 1 来获取元素节点,并修改样式;
                //nodeType==3   ->  文本节点
                //nodeType==1   ->  元素节点
                //给所有的li设置背景颜色
                if(oUl.childNodes[i].nodeType == 1){
                    oUl.childNodes[i].style.background = 'red';
                }
            }
        }    
    </script></head>
<body></body>
</html>

所以，我们所说的DOM即应用为document.节点。

学识尚浅，欢迎大家指正

郄子硕-langgeligelang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
9
评论
深入理解JavaScript的DOM应用

这次带来的是JavaScript的DOM应用，搜罗了个别案例，一起来学习一下吧。什么是DOM :document .节点! 其实说的都是一个东西, CSS时管叫标签, JS时管叫元素,DOM时,管叫节点;DOM节点childNodes:子节点nodeType:节点的类型 nodeType == 3 -&gt; 文本节点nodeType == 1 -&gt; 元素节点下面...
复制链接

扫一扫

专栏目录