当前位置:Gxlcms > JavaScript > 深入JavaScript之DOM应用

深入JavaScript之DOM应用

时间:2021-07-01 10:21:17 帮助过:6人阅读

这次给大家带来深入JavaScript之DOM应用,使用JavaScript之DOM应用的注意事项有哪些,下面就是实战案例,一起来看一下。

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

浏览器支持情况
IE:10% Chrome:60% FF:99% 支持

DOM节点
childNodes:子节点
nodeType:节点的类型

nodeType == 3 -> 文本节点

nodeType == 1 -> 元素节点

childNodes 和 nodeType配合使用

<head>    <meta charset="UTF-8">
    <title>01-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><ul id="ul1">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li></ul>abcdefg //文本节点<span>abcdefg</span> //元素节点</body></html>

获取子节点
children:他只包括元素,不包含文本,兼容所有浏览器
故上面的例子可以这样写,简单粗暴!!!

for (var i=0;i<oUl.children.length;i++){
     oUl.children[i].style.background = 'red';
}

parentNode:父节点
例子:点击链接,隐藏整个li
parentNode示例:

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>02-parentNode</title>
    <script>
        window.onload = function () {            var aA = document.getElementsByTagName('a');            for(var i=0;i<aA.length;i++){
                aA[i].onclick = function () {                    this.parentNode.style.display = 'none';
                }
            }
        }    </script></head><body><ul>
    <li>11111<a href="javaScript:;">隐藏</a></li>
    <li>22222<a href="javaScript:;">隐藏</a></li>
    <li>33333<a href="javaScript:;">隐藏</a></li>
    <li>44444<a href="javaScript:;">隐藏</a></li></ul></body></html>

offsetParent
例子:获取元素在页面上的实际位置
主要用作定位时,获取元素的实际父节点.

示例一:给第二个div2设置绝对定位,给div2的父节点div1什么也不设置,那么div2的offsetParent为body.

<html lang="en"> <head>     <meta charset="UTF-8">     <title>offsetParent</title>     <style>         #div1{width: 200px;height: 200px;background: #ccc;margin-left: 100px;}         #div2{width: 100px;height: 100px;background: red;position: absolute;left: 10px;}     </style>     <script>         window.onload = function () {             oDiv2 = document.getElementById('div2');             alert(oDiv2.offsetParent); //结果:[object HTMLBodyElement] 父节点为body;         }     </script> </head> <body> <div id="div1">     <div id="div2"></div> </div> </body> </html>

示例二:给第二个div2设置绝对定位,给div2的父节点div1设置相对定位,那么div2的offsetParent为div1.

<html lang="en"> <head>     <meta charset="UTF-8">     <title>offsetParent</title>     <style>         #div1{width: 200px;height: 200px;background: #ccc;margin-left: 100px;             position: relative;}         #div2{width: 100px;height: 100px;background: red;position: absolute;left: 10px;}     </style>     <script>         window.onload = function () {             oDiv2 = document.getElementById('div2');             alert(oDiv2.offsetParent); //结果:[object HTMLDivElement] 父节点为div;         }     </script> </head> <body> <div id="div1">     <div id="div2"></div> </div> </body> </html>

2.DOM节点(2)

首尾子节点

有兼容性问题

firstChild、firstElementChild
lastChild 、lastElementChild
   //IE6-8    //oUl.firstChild.style.background='red';    //高级浏览器    //oUl.firstElementChild.style.background='red';

使用示例

<html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function (){    var oUl=document.getElementById('ul1');    //IE6-8
    //oUl.firstChild.style.background='red';
    //高级浏览器
    //oUl.firstElementChild.style.background='red';
    //给第一个li设置红色背景:由于兼容问题,故需判断下
    if(oUl.firstElementChild)
    {
        oUl.firstElementChild.style.background='red';
    }    else
    {
        oUl.firstChild.style.background='red';
    }
};</script></head><body><ul id="ul1">
    <li>1</li>
    <li>2</li>
    <li>3</li></ul></body></html>

兄弟节点 (使用同上)

有兼容性问题

nextSibling、nextElementSibling

previousSibling、previousElementSibling

3.操纵元素属性

元素属性操作
第一种:oDiv.style.display='block';
第二种:oDiv.style['display']='block';
第三种:Dom方式: oDiv2.setAttribute('display','none');

DOM方式操作元素属性
获取:getAttribute(名称)
设置:setAttribute(名称, 值)
删除:removeAttribute(名称)

4.用className选择元素

如何用className选择元素

选出所有元素

通过className条件筛选
初级用法

<html><head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script>
        window.onload=function ()        {            var oUl=document.getElementById('ul1');            var aLi=oUl.getElementsByTagName('li');            for(var i=0;i<aLi.length;i++)
            {                if(aLi[i].className=='box')
                {
                    aLi[i].style.background='red';
                }
            }
        };    </script></head><body><ul id="ul1">
    <li class="box"></li>
    <li class="box"></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="box"></li>
    <li></li></ul></body></html>

封装成函数
高级用法

   <script>
         //封装成函数
        function getByClass(oParent, sClass)        {            var aResult=[];            var aEle=oParent.getElementsByTagName('*');//*通配符,获取oParent下面所有的节点
            for(var i=0;i<aEle.length;i++)
            {                if(aEle[i].className==sClass)
                {
                    aResult.push(aEle[i]);
                }
            }            return aResult;
        }        window.onload=function ()        {            var oUl=document.getElementById('ul1');            var aBox=getByClass(oUl, 'box');            for(var i=0;i<aBox.length;i++)
            {
                aBox[i].style.background='red';
            }
        };    </script>
    <body>
       <ul id="ul1">
          <li class="box"></li>
          <li class="box"></li>
          <li></li>
          <li></li>
          <li></li>
         <li class="box"></li>
         <li></li>
       </ul></body>

5.创建、插入和删除元素

创建DOM元素
createElement(标签名) 创建一个节点 appendChild(节点) 追加一个节点

注意:appendChild(节点) 有两个作用:

(一)如果这个元素是通过createElement(标签名)创建出来的,那么它可以直接添加到新的父级;
(二).如果这个元素有父级, 那么1.先把元素从原有父级上删除;2.再添加到新的父级.

例子:为ul插入li

<html><head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script>
        window.onload=function ()        {            var oBtn=document.getElementById('btn1');            var oUl=document.getElementById('ul1');            var oTxt=document.getElementById('txt1');
            oBtn.onclick=function ()            {                //创建节点
                var oLi=document.createElement('li');
                oLi.innerHTML=oTxt.value;                //添加节点 父级.appendChild(子节点);
                oUl.appendChild(oLi);
            };
        };    </script></head><body><input id="txt1" type="text"/><input id="btn1" type="button" value="创建li"/><ul id="ul1"></ul></body></html>

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

深入JavaScript之基础应用

JS的8个必须注意的基础知识

以上就是深入JavaScript之DOM应用的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行