DOM修改

jQuery版

改變標籤内的屬性

img#img(src="https://scontent-tpe1-1.xx.fbcdn.net/v/t1.0-9/993735_563618560401443_1458385305_n.jpg?oh=61017324bae69919cf7a8bab9346429b&oe=58A0C30A" width="300")

 

//後面不接innerHTML,指定要改變的屬性
document.querySelector("#img").width="150"

Display
原本的寬度是300px

加了JS後,寬度改寫成150px

CSS query

  1. 用CSS找html屬性
  2. 再用JS抓CSS找到的東西
p
  a(href="https://www.wikiwand.com/en/Dog" target="_blank") this is a link
//選取所有href裡面有Dog的東西
//對大小寫敏感
a[href*="Dog"]
  //可以改顏色等確認有沒有選到
  color: blue
  //這步驟熟了就可以不用寫css了,直接寫JS一樣選的到
  
//後面不接innerHTML,指定要改變的屬性
//反斜線抵銷特殊字元
var href_ch = document.querySelectorAll("a[href*=\"Dog\"]");

//雖然只有一個link但因為是陣列形式所以必須這樣寫
for(i=0;i<href_ch.length;i++){
 href_ch[i].href="https://www.wikiwand.com/en/Cat" ;
}
Display
本來的狗狗超連結變成貓咪的連結了

改變CSS

h3 some text
//用style選擇改寫css
//js不支援-,所以要拿掉-,下一個單字改大寫
document.querySelector("h3").style.backgroundColor="#DDD8C4"

Display

some text

修改了css,背景變成褐色了

新增class

h4#h4 some text
.h4
 color: rgb(221, 216, 196)
 font-size: 26px
//+=新增,用=會變成取代class
document.querySelector("#h4").className+="h4"
//另一種寫法(支援新型瀏覽器)
//document.querySelector("#h4").classList.add("h4")

some text

添加了class,文字變成褐色了

新增id

h4.h4 some text
#h4
 color: #90a955
 font-size: 26px
//+=新增,用=會變成取代id
document.querySelectorAll(".h4")[0].id+="h4"

Display

some text

字變成綠色了

改内容文字 textContent=””

h3#title My Cute Dog
document.querySelector("#title").textContent="Catsss"

Display

Catsss

My Cute Dog變成Catsss了

innerHTML進階:裡面填tags

h3#title My Cute Dog
document.querySelector("#title").innerHTML="<em>Catsss</em>"

Display

Catsss

My Cute Dog不但變成Catsss了,還加了斜體

create tag: createElement()&appendChild()

div#div
 h3 MY PET
 p Moko is a cute dog, she is my best friend
//add new tag
var new_img=document.createElement("img");

//add attr
new_img.src="https://scontent-tpe1-1.xx.fbcdn.net/v/t35.0-12/14572506_1297653033664655_1042535654_o.jpg?oh=b89ff559e5f91a1a67826ce4e41eb373&oe=581AF1D8";
new_img.width=300;

new_img.alt="dog MOKO"
//add content: textContent=""
//add class: className+=""/classList.add();


//put on your img: appendChild()
//appendChild 在#div之下新增一個child,排在#div裡面所有child最後面
document.body.appendChild(new_img);

Display

MY PET

Moko is a cute dog, she is my best friend

用js增加一張圖片

應用練習:取代字串

h1 About My 
 span.dog Dog
hr
p moko is a beautiful 
 span.dog dog
 br
 | she is my best 
 span.dog dog
 | friend
 br
 | I love my 
 span.dog dog
var dog = document.querySelectorAll("p .dog");


for (var i=0;i<dog.length;i++){
  //create em tag
  var em=document.createElement("em");

  //add content
  //也可以用textContent
  //textNode,最枝微末節的tag裡面的文字内容
  var em_text =document.createTextNode(" CAT");
  
  //消除原本的dog
  dog[i].innerHTML="";
  
  //em is parent of em_text
  em.appendChild(em_text);

  //dog is the parent of em
  dog[i].appendChild(em);

  }

Display

About My CAT


moko is a beautiful CAT
she is my best CAT friend
I love my CAT
把dog都改成cat

Leave a Reply

Your email address will not be published. Required fields are marked *