【JS】DOM操作元素

<button>操作内容</button>

<script>
    var ele=document.querySelector('div');
    var btn=document.querySelector('button');
    // //获取文本元素内容
    // console.log(ele.innerText);
    // btn.onclick=function () {
    // //    设置div内文本内容
    //     ele.innerText='Hello,World';
    // }
    //获取超文本元素内容
    console.log(ele.innerHTML);
    btn.onclick=function () {
        //    设置div内超文本内容
        ele.innerHTML='<span>新内容</span>';
    }
</script>

<button id="btn2">操作属性</button>
<div id="box2">div标签</div>
<input type="password">
<script>
    var box=document.getElementById('box2');
    var inp=document.querySelector('input');
    var btn=document.getElementById('btn2')
    //获取原生属性
    console.log(box.id);
    btn.onclick=function () {
        //改变原生属性
        box.id='content'
        inp.type='checkbox'
    }

</script>
<button id="btn3">操作属性</button>
<div id="box3" hello="world" style="width: 100px ;height:100px;background-color: #fc4a62">div Tag</div>
<script>
    var btn=document.getElementById('btn3')
    var box=document.getElementById('box3')
    //获取自定义属性
    var res=box.getAttribute('hello')
    console.log(res)

    btn.onclick=function () {
        //设置
        box.setAttribute('hello','新来的');
    //    删除
        box.removeAttribute('hello');
        //修改行内样式
        box.className='MyTag';
        box.style.fontSize='50px';
        box.style.backgroundColor='skyblue';
    //    获取非行内样式,js无法修改非行内样式
        console.log(window.getComputedStyle(box).width);
    }
</script>