JS-NO.6

DOM中元素获取的方式

  • id获取:var oDiv=document.getElementById('div1'); 注意,只能用document;
  • class获取:document.getElementsByClassName('haha'); 可以限定范围的获取元素
  • tagName:可以限定范围的获取元素
  • querySelect
    • tag
    • '#'id
    • .class
  • querySelectAll; 注意,querySelectAll获取到的是一组元素,即使是页面中唯一的id,也得加[];

节点

|nodeType |nodeName | nodeValue|
---|---
文本节点 | 3 | "#text" | 文本内容
元素节点 | 1|大写的标签名| null
注释节点 | 8| #comment |注释内容
document节点 | 9|#document| null

节点关系

  • children 子元素
    • 一般情况兼容,但是在IE7/8下,如果有注释的话,拿到的是不准确的;
  • childNodes 拿到所有的子节点
  • parentNode 父元素; 拿的是结构上的父级;
  • previousSibling 上一个哥哥节点
  • nextSibling 下一个弟弟节点

久久乘法表 + 扩展

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆梦源:勿忘初心,方得始终</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            padding:30px;
        }
        ul li{
            height: 50px;
            line-height: 50px;
            font-size: 30px;
        }
        .bg0{
            background: pink;
        }
        .bg1{
            background: lightcyan;
        }
        .bg2{
            background: lightgoldenrodyellow;
        }
        .change{
            background: purple;
            color: #ffffff;
        }
        ul li span{
            display: inline-block;
            width: 120px;
        }
    </style>
</head>
<body>
<ul></ul>
<script>
    (function () {
        var oUl=document.getElementsByTagName('ul')[0];
        var aLi=oUl.getElementsByTagName('li');
        var str='';
        var oldBg=null; //现在没有,以后会有
        for(var i=1; i<=9; i++){
            str+='<li>'
            for(j=1; j<=i; j++){
                str+='<span>'+(j+'*'+i+'='+j*i)+'</span>'
            }
            str+='</li>'
        }
        oUl.innerHTML=str;

        //隔行换色,最简单的方法,就是%的思想;
        for(var i=0; i<aLi.length; i++){
            aLi[i].className='bg'+i%3;
            //自定义属性思想:所有你将来要用到的数值,不知道存哪里,都可以存在元素的自定义属性上;
            /*aLi[i].oldBg='bg'+i%3;//当我们换完颜色的时候,就把每个li自身的颜色,存在自己的自定义属性上;
             aLi[i].onmouseover=function () {
             this.className='change';
             };
             aLi[i].onmouseout=function () {
             //鼠标移出的时候,就恢复以前的严格,以前的颜色在标签的自定义属性oldBg上存的;
             this.className=this.oldBg;
             };*/
            //思路2:利用变量存值
            aLi[i].onmouseover=function () {
                oldBg=this.className;
                this.className='change';
            };
            aLi[i].onmouseout=function () {
                this.className=oldBg;
            }
        }

    })();
</script>
</body>
</html>

getChildren

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆梦源:勿忘初心,方得始终</title>
</head>
<body>
<!--为什么要封装?要封装他干什么?目的:1)为了获取当前容器下,所有的子元素 2)对子元素再做一个过滤-->
<div>
    <p></p>
    <p></p>
    <p></p>
    <span></span><span></span>
</div>
<script>
    var oDiv=document.getElementsByTagName('div')[0];
    var aP=getChildren(oDiv,'p');
    var aSpan=getChildren(oDiv,'span');
    var aChild=getChildren(oDiv);
    function getChildren(parent,tagName) {
        //1:拿到当前容器下,所有的子节点
        var aChilds=parent.childNodes;
        //2:建立空数组,逐个遍历每个节点进行判断
        var ary=[];
        for(var i=0; i<aChilds.length; i++){
            var cur=aChilds[i];
            if(cur.nodeType===1){
                /*if(typeof tagName==='undefined'){//说明没传第二个参数,那我们获取的就是所有子节点
                    ary.push(cur)
                }else{//传了第二个参数,需要比对标签名后再放入数组;
                    if(cur.tagName.toLowerCase()===tagName.toLowerCase()){
                        ary.push(cur);
                    }
                }*/
                tagName?cur.tagName.toLowerCase()===tagName.toLowerCase()&&ary.push(cur):ary.push(cur);
            }
        }
        return ary;
    }
</script>
</body>
</html>

previouseSbling

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆梦源:勿忘初心,方得始终</title>
</head>
<body>
<div class="wrap"><div>第1个div</div>
    111111
    22222
    33333
    <div>第2个div</div>
    <div>第3个div</div>
    <div>第4个div</div>
    <div>第5个div</div>
</div>
<script>
    var oDiv=document.getElementsByTagName('div')[0];
    var aDiv=oDiv.getElementsByTagName('div');
    //目的:获取当前元素的上一个哥哥元素;
    /*
    * 目的:获取当前元素的上一个哥哥元素;
    * 参数:当前元素
    * 返回值:当前元素的上一个哥哥元素;
    * */
    /**
     * 功能:求当前元素的上一个哥哥元素
     * @param curEle
     * @returns preEle
     */
    function prev(curEle){
        //如果高级浏览器支持的话,直接使用高级浏览器提供的previousElementSibling
        if(curEle.previousElementSibling){
            return curEle.previousElementSibling;
        }
        //证明浏览器不支持 previousElementSibling
        var prev=curEle.previousSibling;
        //循环的条件:上一个节点,必须是个节点,并且不是元素节点
        while(prev && prev.nodeType !==1){
            prev=prev.previousSibling;
        }
        return prev;
    }

</script>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原文 链接 关注公众号获取更多资讯 一、基本类型介绍 1.1 Node类型 DOM1级定义了一个Node接口,该接...
    前端进阶之旅阅读 3,967评论 7 34
  • 本章内容 理解包含不同层次节点的 DOM 使用不同的节点类型 克服浏览器兼容性问题及各种陷阱 DOM 是针对 HT...
    闷油瓶小张阅读 706评论 0 1
  • 语法基础 类型转换 1,parseInt(),parseFloat(),Number()要传参,toString(...
    ishgy阅读 524评论 0 0
  • DOM DOM内容主要分为四部分: 什么是DOM和节点; 获取节点; 节点操作(3种); 属性操作(3种)。 什么...
    magic_pill阅读 797评论 0 1
  • 公司:宁波大发化纤有限公司 姓名:冯玉停 期数:六项精进224期感谢二组学员,234期感谢三组志工 [日精进打卡第...
    尘埃wyzh阅读 60评论 0 0