Javascript DOM ——【操作元素、排他思想】_操作元素样式有哪两个属性-优快云博客

本文链接：https://blog.youkuaiyun.com/impact_factor/article/details/119084376

Javascript DOM 操作元素

操作元素
排他思想

操作元素

JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内
容、属性等。要想操作元素首先要获取元素，在Javascript DOM ——【Web APIs、DOM树、获取元素、document对象的属性】对如何获取元素有详细介绍。

可操作的元素属性和元素内容：

innerText、innerHTML 改变元素内容
src、href
id、alt、title

可操作元素不一一举例说明，只挑几种，其他可以以此类推。

改变元素内容

在这里插入图片描述

innerHTML在使用时会保持编写的格式以及标签样式
innerText去掉所有格式以及标签的纯文本内容
textContent属性在去掉标签后会保留文本格式

 <body>
      <div id="box">
           The first paragraph...
           <p>
               The second paragraph...
               <a href="#">third</a>
           </p>
       </div>
</body>
<script>
	    var box = document.getElementById('box')
	    console.log(box.innerHTML)
	    console.log(box.innerText)
	    console.log(box.textContent)
</script>

在这里插入图片描述

操作元素属性

在DOM中，HTML属性操作是指使用JavaScript来操作一个元素的HTML属性。一个元素包含很多的属性，例如，对于一个img图片元素来说，可以操作它的src、title属性等，或者对于input元素来说，可以操作它的disabled、checked、selected属性等。

案例：显示或隐藏密码（改变input的type属性）：

<body>
    <div class="box">
        <input type="password" name="" id="pwd">
        <label for="">
            <button id = "btn">显示</button>
        </label>
    </div>
</body>