Javascript的DOM操作可以改变网页的内容、结构和风格。我们可以使用DOM操作元素来改变元素中的内容、属性等等。
昨天我们讲了操作DOM的三个步骤:1。获取事件源,请按2。绑定事件,3。添加事件处理程序,并获取元素。我们说过,如果你想给一个元素添加特效,你必须先得到这个元素。然后,我们需要知道我们想要给元素添加什么特效,是点击还是拖动它使其改变。

现在,我们来具体看看如何操作元素来改变我们已经获得的元素。注意,所有的DOM操作都必须有三个步骤。
如何使用DOM改变元素的内容?
语法:element.innerText或element.innerHTML
准备两个HTMLbia'q操作DOM的三个步骤别忘了点击上面的橘色按钮下面的内容就会换innerText和innerhtml的区别:innerText删除空单元格和换行符,而innerHTML保留空单元格和换行符。innerText不能识别HTML标签,但是innerHTML可以。
两种方式添加同样的内容对比innerText不能识别pbiao'q如何操作DOM修改元素属性
语法:元素对象。属性名=值
先获取元素,然后点属性等于新值。
现阶段常见的属性修改图片路径属性src和图片标题title点击按钮改变图片路径和图片上的标题表单元素的属性操作
常见的表单属性注意:表单元素中有一些属性,如禁用、选中和选中。元素对象的这些属性值是布尔型的,即true和false。如果您想在单击后禁用该按钮,请让“按钮。disabled=true”这样用户就不能再点击这个按钮了。

最常见的形式是登录界面,如登录、淘宝登录等。我们来看看最常见的密码切换显示和隐藏。
登陆时常见的切换密码改变type属性值来切换密码状态如何操作DOM改变元素的样式
通过操作DOM,我们不仅可以改变元素的内容和属性,还可以改变元素的样式。
有两种常见的方法:
Element.style由inline style操作。
注意两点:
JS中的样式一般采用驼峰命名法,如fontSize、backgroundColor和borderSize。
JS修改样式操作,导致内联样式,CSS权重比较高。

Element.className如果样式修改较多,可以通过操作类名来改变元素的样式。
注意:class是一个保留字,所以className用于操作元素类名属性。
ClassName直接改变元素的类名,覆盖原来的类名。
这里有一个演示。首先,一个盒子首先有一个对应类名的样式。我们点击框,将类名切换到change对应的样式,它必须有first的宽度和高度样式。如果您简单地先更改为change,则该框将没有宽度和高度100,其宽度将与浏览器窗口一样宽。
首先定义好两个样式change和first两个类名同时存在类名不是被替换 ,而是都要总结:DOM操作是改变元素内容样式最常用的方式。不同属性样式的组合可以使我们的网页更加生动。
DOM操作元素的总结

