【JavaScript】第十一天（DOM的深入操作）_js 判断dom是固有属性-优快云博客

本文链接：https://blog.youkuaiyun.com/wu12378900/article/details/121951213

1.DOM操作之innerHTML

//设置内容
//针对非表单控件
//支持标签。可以解析标签
tianIn.innerHTML//获取内容
tianIn.innerHTML = "<b></b>";//设置内容

//不支持标签，可以解析标签
tianIn.innerText//获取内容
tianIn.innerText = "";//设置内容

//针对表单控件
tianIn.value//获取内容
tianIn.value = "";//设置内容

2.DOM操作之自定义属性

属性分为自定义属性和固有属性。

自定义属性:自己定义的属性（定义的可以是自己命名的，也可以是有生具来的 src，type，href）

//设置自定义属性,setAttribute('属性名','属性值')
tianIn.setAttribute('xx', 'yy');

//获取属性
tianIn.getAttribute('xx');

//删除属性
tianIn.removeAttribute('xx');

固有属性: src type，href checked

//checked: js控制复选框的选中（true）和取消选中（false）。
//设置固有属性
oImg.src = '路径';
oInput.checked = true;

//获取固有属性
oImg.src
oInput.checked

3.开关灯

1.第一次点击按钮

背景变粉色
按钮变成关灯

2.第二次点击按钮

背景变成黑色
按钮变成开灯

3.通过 flag 来控制

点击一次，flag 的值变成相反的状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: #0000;
        }
    </style>
</head>
<body>
    <button>
        开灯
    </button>
</body>
</html>
<script>
    var flag = true
    var oBtn = document.querySelector('button')
    oBtn.onclick = function(){
        flag = !flag
        if(flag){
            document.body.style.background = 'black'
            this.innerHTML = '开灯'
        } else{
            document.body.style.background = 'pink'
            this.innerHTML = '关灯'
        }

    }
</script>