DOM操作元素

一、常用元素的属性操作：

（1）innerText、innerHTML 改变元素的内容

（2）src、href 修改元素属性

（3）id、alt、title

二、改变DOM里面的内容

（1）element.innerText

从起始到终止位置的内容 但它去除html标签，同时空格和换行也会去掉

（2）element.innerHTML

从起始到终止位置的内容 包括html标签，同时保留空格和换行

    <div class="one">不显示标签</div>
    <div class="two">显示标签</div>

var one = document.querySelector('.one');
var two = document.querySelector('.two');
one.innerText = '<strong>我不显示strong标签哦</strong>';  //结果不显示strong标签
two.innerText = '<strong>我显示strong标签哦</strong>';   //结果显示strong标签

（3）innerText和innerHTML的区别

3-1》element.innerText 不识别html标签，空格和换行不显示；而element.innerHTML 识别html标签，空格和换行显示出来

3-2》element.innerText 与 element.innerHTML 是可读写的 可以获取元素里面的内容

三、修改元素属性

（1）src

以罗云熙(lyx) 和 肖战(xz)两位明星的图片为例：

<button id="lyx">罗云熙</button>
<button id="xz">肖战</button>
<img src="./lyx.jpeg" alt="" title="罗云熙">

现在网页显示的是罗云熙的图片：

1.获取元素

        var lyx = document.getElementById('lyx');
        var xz = document.getElementById('xz');
        var img = document.querySelector('img');

2.注册事件 处理程序

修改src属性，改变其路径。

        xz.onclick = function () {
            img.src = './xz.jpeg';
            img.title = '肖战';
        }
        lyx.onclick = function () {
            img.src = './lyx.jpeg';
            img.title = '罗云熙';
        }

当鼠标点击肖战按钮的时候显示的是对应的肖战的图片。反之。

（2）href

点击百度显示谷歌

<p><a id="myAnchor" href="https://www.baidu.com">我是一个超链接</a></p>
        <p>单击按钮以显示上面链接的 href 属性的值。</p>
        <button onclick="myFunction()">点我试一试</button>
        <p id="demo"></p>

function myFunction() {
            var x = document.getElementById("myAnchor").href;
            x="https://www.google.com.hk/webhp";
            document.getElementById("demo").innerHTML = x;
          }

点击我是一个超链接后显示的是百度页面

但是点击按钮（点我试一试）在id为demo这个p标签里显示的却是谷歌的网址。因为我们把百度的网址用href属性修改成了谷歌

四、表单元素的属性操作

（1）表单元素的属性: type、value、checked、selected、disabled，利用DOM可以修改

（2）案例实现 ：点击表单按钮后，input框显示内容为被点击了并且按钮被禁用了

  2-1》获取元素

    <button id="biaodan">表单按钮</button>
    <br>
    <input type="text" name="" id="" value="输入内容">

var btn = document.querySelector('#biaodan');
var input = document.querySelector('input');

  2-2》注册事件 处理程序

  btn.onclick = function () {
            input.value = '被点击了';
            btn.disabled=true; 
        }

五、样式属性操作

通过js两种方式修改元素的大小、颜色、位置等样式

(1)element.style      行内样式操作——在样式较少 或 功能简单的情况下使用

1-1》代码举例：将button按钮的背景颜色变成红色

    <button>好的</button>

var button = document.getElementsByTagName('button')[0];
    button.onclick = function () {
        this.style.backgroundColor = "red";
    }

(2)element.className  类名样式操作——在样式修改较多的情况下使用

2-1》代码举例：将div这个盒子添加宽、高、边框、背景色、字体色

<div>
       哈哈哈
</div>

先我们想要的样式写在style里面，设置一个class样式名为divstyle

<style>
.divstyle{
            width: 400px;
            height: 300px;
            border: 2px solid red;
            background-color: pink;
            color: blue;
        }
</style>

紧接着获取到这个div 再给他设置点击事件，最后在事件里调用className

var div = document.getElementsByTagName('div')[0];
    div.onclick=function(){
        this.className="divstyle";
    }

点击后：