JavaScriptDOM操作：改变网页内容与样式-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_67110633/article/details/128829995

JavaScript中的DOM操作可以改变网页内容，结构和样式，我们可以利用DOM操作元素来改变元素里的内容，属性。

注：以下都是属性。

1.改变元素内容的方法

①element.innerText

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

②element.innerHTML

起始位置到终止位置的全部内容，包括HTML，同时保留空格和换行

代码如下：

<body>
    <!-- 点击div后，把当前时间显示在div里 --> 
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <script>
         //当我们点击按钮，div里的文字会发生变化
         //1.获取元素
         let btn=document.querySelector('button');
         let div=document.querySelector('div');
         //2.注册事件
         btn.onclick=function(){
            div.innerText='2019-6-6';
         }
    </script>
</body>

2.innerText与innerHTML的区别

①innerText

不识别html标签（非标准，由IE发起）

②innerHTML

识别html标签（W3C标准）

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

innerText代码如下：

 <div></div>
  <script>
      //innerText与innerHTML的区别
      //1.innerText
      //这里有一个div，更改他的内容
      let div=document.querySelector('div');
      div.innerText='<strong>今天是:</strong>2023'
      strong标签不会被识别出来，加粗效果无效
  </script>
</body>

innerHTML的代码如下：

<body>
  <div></div>
  <script>
      //innerText与innerHTML的区别
     //2.innerHTML
      let div=document.querySelector('div');
      div.innerHTML='<strong>今天是:</strong>2023'
     加粗有效，html标签被识别
  </script>
</body>

3.常用元素的属性操作

1.innerText，innerHTML改变元素内容

2.src，href

3.id，alt，title

代码如下：

<body>
    <button id="ldh">图片1</button>
    <button id="zxy">图片2</button><br>
    <img src="images/ldh.jpg" alt="" title="图片1">
    <!-- 点击图片1，显示1的图片 -->
    <!-- 点击图片2，显示2的图片 -->
    <script>
        //修改元素  src
        //1.获取元素
        let ldh=document.getElementById('ldh');
        let zxy=document.getElementById('zxy');
        let img=document.querySelector('img');
        //2.注册事件，处理程序
        zxy.onclick=function(){
            img.src='images/zxy.jpg';
            img.title='图片2';
        }
        ldh.onclick=function(){
            img.src='images/ldh.jpg';
            img.title='图片1';
        }
    </script>
</body>