DOM模型 二

待补充,不完整   3/20

<head>

        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .cccc{
                border: 1px solid red;
                width: 100px;height: 100px;
            }
        </style>
    </head>
    <body>
        <input type="text" id="inputcountry" value="" />
        <button οnclick="task()">点击我</button>
        <div id="asia" class="cccc">
            <span id="china">
                china
            </span>
            <span id="korea">
                korea
            </span>
            <span id="indio">
                indio
            </span>
        </div>
        <script type="text/javascript">
            
            //特征相关属性
            var china = document.getElementById('china');
            console.log(china);
            var asia = document.getElementById('asia');
            console.log(asia);
            console.log(asia.innerHTML);//不包括自身
            console.log(asia.outerHTML);//包括自身
            asia.classList.add('aaa','bbb');//添加类名
            asia.classList.remove('bbb');//移除类名
            console.log(asia.classList.contains('bbb'));//查看是否存在bbb
            console.log(asia.classList.item(1));//输出第2个类名
            console.log(asia.className);//输出所有类名
            console.log(asia.classList);//输出这个类中的所有元素数组
            
            
            //盒子模型相关属性
            console.log(asia.clientHeight);
            console.log(asia.clientWidth);
            
            //相关节点的属性
            console.log(asia.children);//所有子元素的数组
            console.log(asia.childElementCount);//
            console.log(asia.children.length);//含0,1,2的子元素
            
            
            //查找相关属性
            console.log(asia.querySelectorAll('span'));//父元素的所有子元素

            console.log(asia.querySelector('span'));//父元素的第一个子元素


驼峰命名法

<div id="anc" class="a" date-helloworld="hello">

</div>

var anc = document.getElementById('anc');

console.log(anc.dateset.helloWorld);注意大写


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值