JavaScript DOM修改(文本和樣式)

OM節(jié)點(diǎn)獲取

var oLi=document.getElementsByTagName("li");
var oLi=document.getElementById("cssLi");
var oLi=document.getElementsByName("myInput");

操作屬性：

document.getElementById(id).attribute=new value

實(shí)例

本例改變了 <img> 元素的 src 屬性：

<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>

操作內(nèi)容

修改 HTML 內(nèi)容的最簡(jiǎn)單的方法時(shí)使用 innerHTML 屬性和innerText（IE支持） outerText outerHTML

區(qū)別描述如下：

innerHTML 設(shè)置或獲取位于對(duì)象起始和結(jié)束標(biāo)簽內(nèi)的 HTML

outerHTML 設(shè)置或獲取對(duì)象及其內(nèi)容的 HTML 形式

innerText 設(shè)置或獲取位于對(duì)象起始和結(jié)束標(biāo)簽內(nèi)的文本

outerText 設(shè)置(包括標(biāo)簽)或獲取(不包括標(biāo)簽)對(duì)象的文本

document.getElementById(id).innerHTML=new HTML

實(shí)例一

本例改變了 <p> 元素的內(nèi)容：

<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>

實(shí)例二：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>innerHTML、outerHTML、innerText、outerHTML之間的區(qū)別</title>
<script language="JavaScript" type="text/javascript">
　　//.innerHTML
　　function innerHTMLDemo()
　　{
　　　id1.innerHTML="<i><u>設(shè)置或獲取位于對(duì)象起始和結(jié)束標(biāo)簽內(nèi)的 HTML.</u></i>";
　　}
　　//.innerText
　　function innerTextDemo()
　　{
　　　id2.innerText="<i><u>設(shè)置或獲取位于對(duì)象起始和結(jié)束標(biāo)簽內(nèi)的文本.</u></i>";
　　}
　　//.outerHTML
　　function outerHTMLDemo()
　　{
　　　id3.outerHTML="<font size=9pt color=red><i><u>設(shè)置或獲取對(duì)象及其內(nèi)容的 HTML 形式.</u></i></font>";
　　}
　　//.outerText
　　function outerTextDemo()
　　{
　　　id4.outerText="<br></br><i><u>設(shè)置(包括標(biāo)簽)或獲取(不包括標(biāo)簽)對(duì)象的文本.</u></i>";
　　}
　　</script>
　　</head>
　　<body>
　　<ul>
　　<li id="id1" onclick="innerHTMLDemo()">innerHTML效果.</li>
　　<li id="id2" onclick="innerTextDemo()">innerText效果.</li>
　　<li id="id3" onclick="outerHTMLDemo()">outerHTML效果.</li>
　　<li id="id4" onclick="outerTextDemo()">outerText效果.</li>
　　</ul>
　　</body>
　　</html>

簡(jiǎn)單的說innerHTML和outerHTML、innerText與outerText的不同之處在于：

　　1)、innerHTML與outerHTML在設(shè)置對(duì)象的內(nèi)容時(shí)包含的HTML會(huì)被解析，而innerText與outerText則不會(huì)。

　　2)、在設(shè)置時(shí)，innerHTML與innerText僅設(shè)置標(biāo)簽內(nèi)的文本，而outerHTML與outerText設(shè)置包括標(biāo)簽在內(nèi)外的文本(多個(gè)標(biāo)簽)。

特別說明：

　　innerHTML是符合W3C標(biāo)準(zhǔn)的屬性，而innerText只適用于IE瀏覽器，因此，盡可能地去使用innerHTML，而少用innerText，

　　如果要輸出不含HTML標(biāo)簽的內(nèi)容，可以使用innerHTML取得包含HTML標(biāo)簽的內(nèi)容后，再用正則表達(dá)式去除HTML標(biāo)簽，

　　下面是一個(gè)簡(jiǎn)單的符合W3C標(biāo)準(zhǔn)的示例：

<a href="javascript：alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">無HTML,符合W3C標(biāo)準(zhǔn)</a>

操作樣式

如需改變 HTML 元素的樣式，請(qǐng)使用這個(gè)語法：

document.getElementById(id).style.property=new style

CSS樣式的個(gè)別屬性采用馱峰式寫法(如：backgroundColor), 且不帶橫線。

document.body.style.backgroundColor="red";

如：

<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
document.getElementById(id).className="類名"；
document.getElementById(id).className="類名1 類名2"；
document.getElementById(id).className+=" 類名3"；//注意要留有空格

<!DOCTYPE HTML>
<html>
<head>
<title>追加CSS類別</title>
<style type="text/css">
.myUL1{
color:#0000FF;
font-family:Arial;
font-weight:bold;
}
.myUL2{
text-decoration:underline;
}
</style>
<script language="javascript">
function check(){
var oMy=document.getElementsByTagName("ul")[0];
oMy.className +=" myUL2"; //追加CSS類,注意要留有空格
}
</script>
</head>
<body>
<ul onclick="check()" class="myUL1">
<li>HTML</li>
<li>JavaScript</li>
<li>CSS</li>
</ul>
</body>
</html>

注意：追加CSS類,注意要留有空格;

ul標(biāo)記已經(jīng)設(shè)定了.myUL1類的樣式的情況下,oMy.className="myUL1 myUL2"不等同于oMy.className +=" myUL2",

oMy.className="myUL1 myUL2"表現(xiàn)形式與oMy.className="myUL2"一樣; 因此應(yīng)當(dāng)采用oMy.className +=" myUl2";

改變 HTML 樣式

通過 HTML DOM，您能夠訪問 HTML 元素的樣式對(duì)象。

下面的例子改變一個(gè)段落的 HTML 樣式：

如需向 HTML DOM 添加新元素，您首先必須創(chuàng)建該元素（元素節(jié)點(diǎn)），然后把它追加到已有的元素上。

<div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
</script>

注意:經(jīng)過測(cè)試證明,para.appendChild(node);調(diào)換至最后一行,運(yùn)行正常

最可行的方法:添加節(jié)點(diǎn)的順序,由內(nèi)到外(個(gè)人習(xí)慣);

言

測(cè)試A：那啥！摳圖仔，線上樣式怎么點(diǎn)著點(diǎn)著就出問題了。
前端：啥？線上css樣式錯(cuò)亂了？你是不是有緩存啊！清下緩存試試。
測(cè)試A（內(nèi)心戲：這摳圖仔一有問題就賴緩存）：清緩存后，還有啊！你看看吧！
前端：見鬼了，我本地沒復(fù)現(xiàn)啊。

問題背景

在某次迭代中，在做產(chǎn)品體驗(yàn)的時(shí)候發(fā)現(xiàn)從申請(qǐng)記錄頁面跳轉(zhuǎn)我的訂單，在切回來，發(fā)現(xiàn)申請(qǐng)記錄頁樣式錯(cuò)亂了。本地調(diào)試發(fā)現(xiàn)沒有該問題。

問題定位

發(fā)現(xiàn)該問題測(cè)試環(huán)境會(huì)出現(xiàn)，本地環(huán)境未復(fù)現(xiàn)
打開調(diào)試面板，定位到樣式出現(xiàn)問題元素。發(fā)現(xiàn)antd的樣式（.ant-card）覆蓋了項(xiàng)目中寫的樣式（.recordCard___yE53v）。如圖：

為什么會(huì)出現(xiàn)這種場(chǎng)景？為什么該問題測(cè)試環(huán)境會(huì)出現(xiàn)，本地環(huán)境未復(fù)現(xiàn)？

調(diào)試發(fā)現(xiàn) .ant-card可以從多個(gè)chunk文件引入，切換到network面板發(fā)現(xiàn)，2966....chunk.css文件是在我們跳轉(zhuǎn)到我的訂單頁面才引入的。也就是我的訂單頁面按需加載組件打包出來的樣式文件。

到這其實(shí)就定位到問題所在了，相同組件在不同頁面按需加載的時(shí)候css文件被重復(fù)打包了。

開發(fā)環(huán)境不會(huì)，是因?yàn)槲覀儗?dǎo)入組件是直接導(dǎo)入的node_modules的es模塊的文件，如圖：

為什么會(huì)出現(xiàn)在不同頁面按需加載的時(shí)候css文件被重復(fù)打包了呢？

dynamicImport: {
loading: '@/Loading',
},

umi開啟dynamicImport時(shí)，會(huì)啟動(dòng)按route分包，實(shí)現(xiàn)頁面級(jí)別的按需加載，這種分包模式明顯在處理antd的樣式模塊復(fù)用上出現(xiàn)了一些問題。

所以推薦項(xiàng)目開啟該模式時(shí)，antd應(yīng)該使用下面的方案二進(jìn)行處理antd的樣式，防止出現(xiàn)偶現(xiàn)的線上問題。

之前代碼中會(huì)出現(xiàn)很多莫名其妙的!important去提高樣式的權(quán)重，當(dāng)然也有在頁面級(jí)引入antd.css的，可能也是因?yàn)橛龅搅薬ntd樣式覆蓋的問題。

輸出方案

方案一：提高recordCard___yE53v的權(quán)重，不推薦。

優(yōu)點(diǎn)：

改動(dòng)對(duì)其他業(yè)務(wù)無任何影響。

缺點(diǎn)：

治標(biāo)不治本，其他類似場(chǎng)景問題需要重復(fù)處理，代碼入侵嚴(yán)重，心智成本比較高。

方案二：修改umi打包配置，對(duì)引入多次的antd組件樣式不重復(fù)打包，需要根據(jù)實(shí)際項(xiàng)目情況選擇。

缺點(diǎn)：

因?yàn)槭窃谡麄€(gè)工程方面改動(dòng)，影響面比較大，需要放在測(cè)試環(huán)境驗(yàn)證一段時(shí)間
打包出來的verdors（3.8M），antdesigns（1.5M）js文件體積會(huì)比較大(實(shí)際壓縮后不會(huì)這么大)，一定程度上影響首屏加載速度。

優(yōu)點(diǎn)：

采用分包，優(yōu)化大文件資源，減少重復(fù)不必要代碼。

// ...
optimization: {
splitChunks: {
chunks: 'all',
minSize: 30000,
minChunks: 2,
automaticNameDelimiter: '.',
cacheGroups: {
antd: {
name: 'antdesigns',
test: /[\/]node_modules[\/](antd|antd-mobile|@ant-design)[\/]/,
priority: 20,
},
vendors: {
name: 'vendors',
test({ resource }: any) {
return /[\/]node_modules[\/]/.test(resource);
},
priority: 10,
},
},
},
},
// ...

優(yōu)化后如圖所示，申請(qǐng)記錄頁面跳轉(zhuǎn)到我的訂單頁面再跳回來，.ant-card并沒有多產(chǎn)生一個(gè)css文件引入。整個(gè)dist文件包體積從116.5M到108.4M，降低了8.1M。

方案三：直接引入antd的less文件，不推薦

樣式文件體積過大： 直接引入antd的less文件會(huì)導(dǎo)致整個(gè)antd樣式庫被打包到項(xiàng)目中，包括未使用的樣式，從而增加了打包后的樣式文件體積，影響頁面加載性能。
影響頁面渲染性能： 大量的樣式文件會(huì)增加瀏覽器解析和渲染樣式的時(shí)間，影響頁面的加載速度和性能。
不利于 緩存 和更新： 直接引入antd的less文件會(huì)使樣式文件無法通過瀏覽器緩存和CDN緩存等機(jī)制進(jìn)行有效管理和更新。

webpack優(yōu)化配置之splitChunks

webpack.docschina.org/plugins/spl…

默認(rèn)值

新的 chunk 可以被共享，或者模塊來自于 node_modules 文件夾
新的 chunk 體積大于 20kb（在進(jìn)行 min+gz 之前的體積）
當(dāng)按需加載 chunks 時(shí)，并行請(qǐng)求的最大數(shù)量小于或等于 30
當(dāng)加載初始化頁面時(shí)，并發(fā)請(qǐng)求的最大數(shù)量小于或等于 30

警告
選擇了默認(rèn)配置為了符合 Web 性能最佳實(shí)踐，但是項(xiàng)目的最佳策略可能有所不同。如果要更改配置，則應(yīng)評(píng)估所做更改的影響，以確保有真正的收益，所以我們做上述分包策略時(shí)，需要根據(jù)實(shí)際項(xiàng)目情況來處理。

// 下面這個(gè)配置對(duì)象代表 SplitChunksPlugin 的默認(rèn)行為。
module.exports={//...
optimization: {
splitChunks: {
// 有效值為 all，async 和 initial
chunks: 'async',
// 生成 chunk 的最小體積（以 bytes 為單位）。
minSize: 20000,
// 通過確保拆分后剩余的最小 chunk 體積超過限制來避免大小為零的模塊。
minRemainingSize: 0,
// 拆分前必須共享模塊的最小 chunks 數(shù)。
minChunks: 1,
// 按需加載時(shí)的最大并行請(qǐng)求數(shù)。
maxAsyncRequests: 30,
// 入口點(diǎn)的最大并行請(qǐng)求數(shù)。
maxInitialRequests: 30,
// 強(qiáng)制執(zhí)行拆分的體積閾值和其他限制（minRemainingSize，maxAsyncRequests，maxInitialRequests）將被忽略。
enforceSizeThreshold: 50000,
/**
* 緩存組可以繼承和/或覆蓋來自 splitChunks.* 的任何選項(xiàng)。
* 但是 test、priority 和 reuseExistingChunk 只能在緩存組級(jí)別上進(jìn)行配置。
* 將它們?cè)O(shè)置為 false以禁用任何默認(rèn)緩存組。
*/
cacheGroups: {
defaultVendors: {
/**
* 控制此緩存組選擇的模塊。省略它會(huì)選擇所有模塊。
* 注：使用/是因?yàn)橐瑫r(shí)適配unix和windows系統(tǒng)
*/
test: /[\/]node_modules[\/]/,
// 優(yōu)先級(jí)，默認(rèn)值0
priority: -10,
// 如果當(dāng)前 chunk 包含已從主 bundle 中拆分出的模塊，則它將被重用，而不是生成新的模塊。這可能會(huì)影響 chunk 的結(jié)果文件名。
reuseExistingChunk: true,
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
},
},
},
},
};

webpack知識(shí)延展

線上和本地運(yùn)行結(jié)果不一致，一直是一件讓前端開發(fā)者頭痛的問題。造成這種情況的原因之一呢？是因?yàn)閳?chǎng)景不一樣，webpack提供了兩種模式。

Development 模式：

在開發(fā)模式下，Webpack 會(huì)生成映射文件（source map），以便于調(diào)試代碼。
生成的代碼不會(huì)被壓縮，可讀性更強(qiáng)，包括注釋和格式化。
啟用了熱模塊替換（Hot Module Replacement），可以在不刷新頁面的情況下更新模塊。
通常會(huì)有更多的詳細(xì)的錯(cuò)誤日志和警告信息，方便開發(fā)者排查問題。

Production 模式：

在生產(chǎn)模式下，Webpack 會(huì)對(duì)代碼進(jìn)行壓縮和優(yōu)化，以減小文件大小和提高性能。
不會(huì)生成映射文件，以減少額外的文件大小。
移除了開發(fā)時(shí)的一些輔助功能，如熱模塊替換，以提高性能。
通常會(huì)有更少的詳細(xì)錯(cuò)誤日志和警告信息，以減少額外的開銷。

我們要杜絕發(fā)生線上和本地運(yùn)行結(jié)果不一致的這種情況，需要我們深入了解項(xiàng)目中會(huì)用到的webpack，vite，rollup等前端工程化工具的內(nèi)部打包機(jī)制。

知識(shí)補(bǔ)充

class="name1 name2"樣式覆蓋不是根據(jù)這里的類名先后來的而是根據(jù)生成的樣式表中的順序。

作者：城主北寧
鏈接：https://juejin.cn/post/7346884660443988019

次寫了篇pc端的css重置樣式，需要注意的一些事。好多xd留言，馬上開動(dòng)，說說移動(dòng)端的css樣式重置需要注意的一些事。

1、和pc端不同的是，pc需要兼容低版本的瀏覽器，而移動(dòng)端這方面的工作就小多了。

2、移動(dòng)端大膽的用css3吧

那么重置移動(dòng)端的樣式有哪些注意點(diǎn)呢？

容器的大小：
-webkit-box-sizing:border-box; /*webkit核心*/
box-sizing:border-box; /*容器的大小為邊框的大小*/
去除input的默認(rèn)樣式：
-webkit-appearance:none;
去除a鏈接點(diǎn)擊菜單時(shí)區(qū)域高亮
第二種清除浮動(dòng)(第一種見另一篇css重置樣式的那些事)：
說完了。下篇說說bootstrap的滾動(dòng)監(jiān)聽插件的使用。

在線咨詢

上一篇：JS 解密和混淆破解
下一篇：22.HTML：Flexbox和Grid布局