欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

深入JavaScript之DOM应用

程序员文章站 2022-05-16 20:09:58
...
这次给大家带来深入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>

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

推荐阅读:

深入JavaScript之基础应用

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

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