[鼠年全马] W11 - JavaScript学习心得 - 使用选择器改变世界

因为被朋友嫌弃标题下的好长好冗, 而且看不出重点...

于是乎
这週开始改变了原本下标题的方式, 将比较不重要的字缩写或省略, 接着主题, 接着副主题
顺便练习「怎么样下一个 可以打动人心 的标题」 哈哈~

---

在改变世界前先练习改变DOM吧~

上週练习了如何使用选择器, 会使用之后, 就可以来用选择器改变DOM啰~

改DOM的方式其实也是非常简单, 这里举几个常用的例子

1. input

首先绝对是常用排行第一名的input, 通常实务上会用于对它的值做改变

<input id="myInput"></input>

先使用选择器的抓到它, 这边使用我个人最爱用的 querySelector

document.querySelector("#myInput")

接着要对它做 改变值 的动作, 于是乎, 后面串.value来改变它

// 赋予id为myInput的DOM, 并赋予值为"我是大帅哥"document.querySelector("#myInput").value = "我是大帅哥"; 

此时会发现原本空的input栏位, 已经被我塞进了内容了

是不是很简单阿~

那既然可以塞值, 相反的当然也能取值, 取值方式就是「不要给它值」就对了

// 取id为myInput的DOM值, 并赋予到变数上var myInputValue = document.querySelector("#myInput").value; console.log(myInputValue); // "我是大帅哥"

基本上到这边就会一半了, 剩下的一半都是依此类推

2. span

例如今天遇到一个span的内容是错的, 我要将它改正

<span class="mySpan">我是丑男</span>

一样要先用选择器抓到它

document.querySelector('.mySpan')

接着后面串改变内容的语法.textContent, 再给它正确的内容就可以了

// 抓到class包含mySpan的DOM, 并赋予值为"我是大帅哥"document.querySelector('.mySpan').textContent = '我是大帅哥(无误)';

一样要取内容的方式也是「不要给它内容」就对了

// 抓到class包含mySpan的DOM的值, 并赋予到变数上var mySpanContent = document.querySelector(".mySpan").textContent; console.log(mySpanContent); // "我是大帅哥(无误)"

3. 依此类推

就是依此类推
其他常用方法还有像是改变html内容 - innerHtml

document.querySelector("#myElement").innerHtml = "<h3>海贼王最高</h3>"; 

或是只要改变text内容就好的 - innerText

document.querySelector("#myElement").innerText = "海贼王最高"; 

还有进阶一点的可以改变class - classlist
或是改变id - id

4. 使用方法改变DOM

上面都是取得DOM的 属性 的方式来去做改变的方式
那其实javascript有提供内建的方法(function)也可以用于改变DOM, 例如:

setAttribute(name, value): 设定DOM的属性, name为属性名称, value为属性值

// 抓到id为myElement的DOM, 使用setAttribute方法设定它的id为myElement2document.querySelector("#myElement").setAttribute('id','myElement2');

getAttribute(name): 取得DOM的属性值, name为要取得的属性名称

// 抓到id为myElement的DOM, 使用getAttribute方法取得它的idvar myElementId = document.querySelector("#myElement").getAttribute('id');console.log(myElementId); // myElement

append(something): 在DOM里插入东西(邪笑xD), 是在内容的最后面插入喔~

document.querySelector("#myElement").append("不要想歪歪xD");

prepend(something): 也是在DOM里插入东西xD, 但是是在内容的最前面插入~

document.querySelector("#myElement").prepend("就叫你不要想歪歪xD");

方法当然也是不只这几种, 其他相关的使用方式及说明可以参考 MDN-Element

钓竿和鱼都有了
就看你要如何磨练技术去钓到牠们

---

上面那句我想了很久呢~ 而且真的是自己写给自己看的
希望自己经由这一年的磨练可以达到更高的境界

本週内容就到这, 下週预计写DOM的事件, 并与使用者做互动
(事情渐渐变得有趣起来了呢~呵)
(中二病发作)