账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    关于children是否是实时获取html中的元素的？
    27
    0 
    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style id="css">
body,ul,ol{margin:0;padding:0;}
li{ list-style:none;}
.wrap{width:800px;margin:100px auto 0;}
 #picList{width:800px;height:360px; -webkit-perspective:800px; }
 #picList li{width:50px;height:360px; position:relative; -webkit-transform-style:preserve-3d; -webkit-transform-origin:center center -180px;float:left;}
 #picList a{width:100%;height:100%; position:absolute;left:0;top:0;}
 #picList li a:nth-of-type(1){ background:url(3d幻灯片/1.jpg) no-repeat; }
 #picList li a:nth-of-type(2){ background:url(3d幻灯片/2.jpg) no-repeat; top:-360px; -webkit-transform-origin:bottom; -webkit-transform:rotateX(90deg)}
 #picList li a:nth-of-type(3){ background:url(3d幻灯片/3.jpg) no-repeat; -webkit-transform:translateZ(-360px) rotateX(180deg);}
 #picList li a:nth-of-type(4){ background:url(3d幻灯片/4.jpg) no-repeat; -webkit-transform-origin:top; -webkit-transform:rotateX(-90deg); top:360px;}
 #picList li span{ position:absolute;width:360px;height:360px;background:#333;}
 #picList li span:nth-of-type(1){ -webkit-transform-origin:left; -webkit-transform:rotateY(90deg);left:0;}
 #picList li span:nth-of-type(2){ -webkit-transform-origin:right; -webkit-transform:rotateY(-90deg);right:0;}

 #btns{float:right; padding:10px 0;}
 #btns li{width:40px;height:40px;background:#000;color:#fff; border-radius:50%; font:italic 30px/40px Arial;float:left;margin:0 5px; text-align:center; cursor:pointer;}
 #btns .active{ background:#f60;}

</style>
<script>
window.onload=function()
 {    
    var oPicList=document.getElementById("picList");
    var oCss=document.getElementById("css");
    var aBtns=document.getElementById("btns").getElementsByTagName("li");
    var aLi=null;
    var sLi="";
    var sCss="";
    var iLiw=50;
    var iZindex=0;
    var iNow=0;
    var iLength=oPicList.clientWidth/iLiw;
    
    oPicList.innerHTML=sLi;
    oCss.innerHTML+=sCss;
    aLi=oPicList.children;//先写了获取oPicList元素下的children
    
    console.log(iLength,"1")
    for(var i=0;i<iLength;i++)//在给oPicList元素添加children
    {
        i>iLength/2?iZindex--:iZindex++;
        sLi+='<li><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><span></span><span></span></li>';
        sCss+="#picList li:nth-of-type("+(i+1)+") a{ background-position:-"+i*iLiw+"px 0;}";
        sCss+="#picList li:nth-of-type("+(i+1)+"){z-index:"+iZindex+"}";
        
    }
    
    for(var i=0;i<aBtns.length;i++)
    {
        (function(a){
            aBtns[a].onclick=function()
            {
                console.log(aLi.length,"aLi.length")//此时aLi.length的长度显示为0的
                for(var i=0;i<aLi.length;i++)
                {
                    aLi[i].style.transition="0.5s "+i*50+"ms";
                    aLi[i].style.WebkitTransform="rotateX(-"+a*90+"deg)";
                }    
                this.className="active";
                aBtns[iNow].className="";
                iNow=a;
            };    
        })(i)
    }
    
    console.log(iLength,"2")
    
    
    
};
    
</script>
</head>
<body>
<div class="wrap">
    <ul id="picList">
        
    </ul>
    <ol id="btns">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>
</div>
</body>
</html>

    但是在另外一个小实验中：

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<ul id="ul"></ul>
</body>
<script>
    var oul=document.getElementById("ul")
    //var ali=ul.getElementsByTagName("li")
    var ali=oul.children;
    ul.innerHTML="<li>1</li>"
    console.log(ali.length)//似乎先写ali=oul.children;去获取元素，再向ul中添加元素，貌似也能用children实时获取到？
</script>
</html>
    1
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得：提问者悬赏的 11 元积分
        全部回答
    • 共 0 条
    • 烈酒孤独 普通会员 1楼

      是的，孩子们可以实时获取HTML中的元素。它们可以通过监听DOM事件（如addEventListener）来实现这一点。例如，如果你有一个元素，你可以使用以下代码来监听这个元素的click事件：

      javascript element.addEventListener('click', function() { console.log('Element clicked!'); });

      在这个例子中，当这个元素被点击时，控制台将打印出Element clicked!。

      另外，如果你有一个元素的textContent或innerHTML，你可以使用innerHTML来获取元素的HTML内容。例如：

      javascript element.innerHTML = 'Hello, world!';

      在这个例子中，当这个元素的innerHTML被修改时，控制台将打印出Hello, world!。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部