操作元素

Javascript的DOM操作可以改变网页的内容,结构和样式,我们可以利用DOM操作元素来改变元素的内容和属性等。

改变元素的内容


innerText

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

innerText不识别html标签
由IE提起,不是标准


innerHTML

element.innerHTML
起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行

innerHTML识别HTML标签
W3C提起,标准。平时用这个就行了

<p>放歌未尽空回棹,落日增波忧思侵。</p>
// innerHTML还可以用来获取文段内容
// 案例:
let p = document.querySelector('p');
console.log(p.innerHTML);

image-1657290084297


常用元素的属性操作

  1. innerText ,innerHTML改变元素内容
  2. src,href
  3. id,alt,title

改变图片路径

<img src="https://blog.meowrain.cn/api//i/2022/07/07/32o9s-3.png" alt="">
<button class="btn">换图</button>
let img = document.querySelector('img');
let bt = document.querySelector('.btn');
bt.onclick = function() {
    img.src = 'https://blog.meowrain.cn/api//i/2022/07/07/1zbmm.png';
}

点击按钮后,图片的链接会被换成js文件中写的链接,图片也就会跟着改变了
image-1657291166742
—>
image-1657291187775