DOM基本操作

2022-10-13 105

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： DOM基本操作

获取元素

获取id元素

var timer = document.getElementById('id');//获取id元素
console.dir(timer);//打印我们返回的元素对象 更好的查看里面的属性和方法

获取标签元素

//返回的是 获取过来元素对象的集合 以伪数组的形式储存的
var lis = document.getElementsByTagName('li');
console.log(lis);
//不管有没有元素 返回的都是伪数组的形式

//获取某个元素（父元素）内部所有指定标签名的子元素
element.getElementsByTagName('标签名');

通过HTML5新增方法获取

document.getElementClassName('类名');//根据类名返回元素对象集合
document.querySelector('选择器');//根据指定选择器返回第一个元素
document.querySelectorAll('选择器');//根据指定选择器返回

获取特殊元素

var bodyEle = document.body;//获取body元素
console.dir(bodyEle);
var htmlEle = document.documentElement;//返回html元素

操作元素

修改元素内容

innerText 和 innerHTML

//显示时间
<body>
    <button>点击显示时间</button>
    <div>123</div>
    <script>
        var b = document.querySelector('button');
        var div = document.querySelector('div');
        b.onclick = function () {
            div.innerText = getDate();
        }
        function getDate() {
            console.log('aaaa');
            var date = new Date;
            var year = date.getFullYear();
            var mouth = date.getMonth() + 1;
            var day = date.getDate();
            return '今天是：' + year + '年' + mouth + '月' + day +'日';
        }
    </script>
</body>

innerText 和 innerHTML 的区别

1.innerText 不识别html标签非标准去除空格和换行

2.innerHTML 识别html标签 W3C标准保留空格和换行

修改元素属性

图片按钮切换

<body>
    <button id="ph1">图片1</button>
    <button id="ph2">图片2</button>
    <br>
    <img width="100px" height="80px" src="photo/WallPage_Git.png" alt="" title="git图片">
    <script>
        var p1 = document.getElementById('ph1');
        var p2 = document.getElementById('ph2');
        var ig = document.querySelector('img');
        p2.onclick = function () {
            ig.src = "photo/WallPaper_Idea.jpg";
        }
        p1.onclick = function () {
            ig.src = "photo/WallPage_Git.png";
        }
    </script>
</body>

案例->分时问候

<body>
    <img width="100px" height="80px" src="photo/WallPage_Git.png" alt="" title="git图片">
    <br>
    <p>上午好</p>
    <script>
        var ig = document.querySelector('img');
        var p1 = document.querySelector('p');
       var date = new Date();
       var h = date.getHours();
       if(h >= 12){
           ig.src = "photo/WallPaper_Idea.jpg";
           p1.innerHTML = "下午好！"
       }
    </script>
</body>

案例->显示隐藏密码框

//设置密码框的密码可见切换
var eye =document.getElementById('eye');
var pwd = document.getElementById('user_pwd');
var flag= 0;//点击依此eye,flag变换一次
eye.onclick = function () {
    if(flag == 0){
        pwd.type = 'text';
        eye.src = 'imgs/icon/open_eye.svg';
        flag = 1;
    }else{
        pwd.type = "password";
        eye.src = "imgs/icon/close_eye.svg";
        flag = 0;
    }
}

样式属性操作

1.行内样式操作，修改的样式较少时适合

element.style

2.类名样式操作,修改样式较多时使用

element.className