JS | DOM中的操作元素_js 操作dom的一些元素-CSDN博客

本文链接：https://blog.csdn.net/m0_72383454/article/details/126407763

一、操作元素的内容

二、操作元素样式属性

三、总结

操作元素是DOM的核心内容，以下是我在学习中，我觉得可以注意的点~

一、操作元素的内容

innerText与innerHtml的区别：

innerText不识别html标签，非标准，去除空格和换行
innerHtml识别html标签，W3C标准，保留空格和换行的

共同点：

这两个属性是可读写的，可以获取元素里面的内容

二、操作元素样式属性

样式属性操作：我们可以通过JS修改元素的大小、颜色、位置等样式：

element.style 行内样式操作

注意:

JS里面的样式采取驼峰命名法。比如：fontSize、backgroundColor
JS修改style样式操作，产生的是行内样式，CSS权重比较高

element.className 类名样式操作

注意：

如果样式修改较多，可以采取操作类名方式更改元素样式
class因为是个保留字，因此使用className来操作元素类名属性
className会直接更改元素的类名，会覆盖原先的类名（如果想要保留原先的类名，我们可以使用多类名选择器）

表单的两个事件：

onfocus 获取焦点
onblur 失去焦点

我们来看一个案例：显示隐藏文本框内容。

<body>
    <input type="text" value="手机">
    <script>
       //1.获取元素
       var text = document.querySelector('input')
       //2.注册事件
       text.onfocus = function(){
        if(text.value === '手机'){
            this.value = ''
        }
        //获得焦点，把文本框的文字变黑
        this.style.color = '#333'
       }
       text.onblur = function(){
        if(text.value === ''){
            this.value = '手机'
        }
        //失去焦点，把文本框的文字变灰
        this.style.color = '#999'
       }
    </script>
</body>