JavaScript DOM修改(文本和样式)

OM节点获取

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

操作属性：

document.getElementById(id).attribute=new value

实例

本例改变了 <img> 元素的 src 属性：

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

操作内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性和innerText（IE支持） outerText outerHTML

区别描述如下：

innerHTML 设置或获取位于对象起始和结束标签内的 HTML

outerHTML 设置或获取对象及其内容的 HTML 形式

innerText 设置或获取位于对象起始和结束标签内的文本

outerText 设置(包括标签)或获取(不包括标签)对象的文本

document.getElementById(id).innerHTML=new HTML

实例一

本例改变了 <p> 元素的内容：

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

实例二：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>innerHTML、outerHTML、innerText、outerHTML之间的区别</title>
<script language="JavaScript" type="text/javascript">
　　//.innerHTML
　　function innerHTMLDemo()
　　{
　　　id1.innerHTML="<i><u>设置或获取位于对象起始和结束标签内的 HTML.</u></i>";
　　}
　　//.innerText
　　function innerTextDemo()
　　{
　　　id2.innerText="<i><u>设置或获取位于对象起始和结束标签内的文本.</u></i>";
　　}
　　//.outerHTML
　　function outerHTMLDemo()
　　{
　　　id3.outerHTML="<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";
　　}
　　//.outerText
　　function outerTextDemo()
　　{
　　　id4.outerText="<br></br><i><u>设置(包括标签)或获取(不包括标签)对象的文本.</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>

简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于：

　　1)、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。

　　2)、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内外的文本(多个标签)。

特别说明：

　　innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，

　　如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，

　　下面是一个简单的符合W3C标准的示例：

<a href="javascript：alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

操作样式

如需改变 HTML 元素的样式，请使用这个语法：

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

CSS样式的个别属性采用驮峰式写法(如：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标记已经设定了.myUL1类的样式的情况下,oMy.className="myUL1 myUL2"不等同于oMy.className +=" myUL2",

oMy.className="myUL1 myUL2"表现形式与oMy.className="myUL2"一样; 因此应当采用oMy.className +=" myUl2";

改变 HTML 样式

通过 HTML DOM，您能够访问 HTML 元素的样式对象。

下面的例子改变一个段落的 HTML 样式：

如需向 HTML DOM 添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。

<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>

注意:经过测试证明,para.appendChild(node);调换至最后一行,运行正常

最可行的方法:添加节点的顺序,由内到外(个人习惯);

言

测试A：那啥！抠图仔，线上样式怎么点着点着就出问题了。
前端：啥？线上css样式错乱了？你是不是有缓存啊！清下缓存试试。
测试A（内心戏：这抠图仔一有问题就赖缓存）：清缓存后，还有啊！你看看吧！
前端：见鬼了，我本地没复现啊。

问题背景

在某次迭代中，在做产品体验的时候发现从申请记录页面跳转我的订单，在切回来，发现申请记录页样式错乱了。本地调试发现没有该问题。

问题定位

发现该问题测试环境会出现，本地环境未复现
打开调试面板，定位到样式出现问题元素。发现antd的样式（.ant-card）覆盖了项目中写的样式（.recordCard___yE53v）。如图：

为什么会出现这种场景？为什么该问题测试环境会出现，本地环境未复现？

调试发现 .ant-card可以从多个chunk文件引入，切换到network面板发现，2966....chunk.css文件是在我们跳转到我的订单页面才引入的。也就是我的订单页面按需加载组件打包出来的样式文件。

到这其实就定位到问题所在了，相同组件在不同页面按需加载的时候css文件被重复打包了。

开发环境不会，是因为我们导入组件是直接导入的node_modules的es模块的文件，如图：

为什么会出现在不同页面按需加载的时候css文件被重复打包了呢？

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

umi开启dynamicImport时，会启动按route分包，实现页面级别的按需加载，这种分包模式明显在处理antd的样式模块复用上出现了一些问题。

所以推荐项目开启该模式时，antd应该使用下面的方案二进行处理antd的样式，防止出现偶现的线上问题。

之前代码中会出现很多莫名其妙的!important去提高样式的权重，当然也有在页面级引入antd.css的，可能也是因为遇到了antd样式覆盖的问题。

输出方案

方案一：提高recordCard___yE53v的权重，不推荐。

优点：

改动对其他业务无任何影响。

缺点：

治标不治本，其他类似场景问题需要重复处理，代码入侵严重，心智成本比较高。

方案二：修改umi打包配置，对引入多次的antd组件样式不重复打包，需要根据实际项目情况选择。

缺点：

因为是在整个工程方面改动，影响面比较大，需要放在测试环境验证一段时间
打包出来的verdors（3.8M），antdesigns（1.5M）js文件体积会比较大(实际压缩后不会这么大)，一定程度上影响首屏加载速度。

优点：

采用分包，优化大文件资源，减少重复不必要代码。

// ...
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,
},
},
},
},
// ...

优化后如图所示，申请记录页面跳转到我的订单页面再跳回来，.ant-card并没有多产生一个css文件引入。整个dist文件包体积从116.5M到108.4M，降低了8.1M。

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

样式文件体积过大： 直接引入antd的less文件会导致整个antd样式库被打包到项目中，包括未使用的样式，从而增加了打包后的样式文件体积，影响页面加载性能。
影响页面渲染性能： 大量的样式文件会增加浏览器解析和渲染样式的时间，影响页面的加载速度和性能。
不利于 缓存 和更新： 直接引入antd的less文件会使样式文件无法通过浏览器缓存和CDN缓存等机制进行有效管理和更新。

webpack优化配置之splitChunks

webpack.docschina.org/plugins/spl…

默认值

新的 chunk 可以被共享，或者模块来自于 node_modules 文件夹
新的 chunk 体积大于 20kb（在进行 min+gz 之前的体积）
当按需加载 chunks 时，并行请求的最大数量小于或等于 30
当加载初始化页面时，并发请求的最大数量小于或等于 30

警告
选择了默认配置为了符合 Web 性能最佳实践，但是项目的最佳策略可能有所不同。如果要更改配置，则应评估所做更改的影响，以确保有真正的收益，所以我们做上述分包策略时，需要根据实际项目情况来处理。

// 下面这个配置对象代表 SplitChunksPlugin 的默认行为。
module.exports={//...
optimization: {
splitChunks: {
// 有效值为 all，async 和 initial
chunks: 'async',
// 生成 chunk 的最小体积（以 bytes 为单位）。
minSize: 20000,
// 通过确保拆分后剩余的最小 chunk 体积超过限制来避免大小为零的模块。
minRemainingSize: 0,
// 拆分前必须共享模块的最小 chunks 数。
minChunks: 1,
// 按需加载时的最大并行请求数。
maxAsyncRequests: 30,
// 入口点的最大并行请求数。
maxInitialRequests: 30,
// 强制执行拆分的体积阈值和其他限制（minRemainingSize，maxAsyncRequests，maxInitialRequests）将被忽略。
enforceSizeThreshold: 50000,
/**
* 缓存组可以继承和/或覆盖来自 splitChunks.* 的任何选项。
* 但是 test、priority 和 reuseExistingChunk 只能在缓存组级别上进行配置。
* 将它们设置为 false以禁用任何默认缓存组。
*/
cacheGroups: {
defaultVendors: {
/**
* 控制此缓存组选择的模块。省略它会选择所有模块。
* 注：使用/是因为要同时适配unix和windows系统
*/
test: /[\/]node_modules[\/]/,
// 优先级，默认值0
priority: -10,
// 如果当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用，而不是生成新的模块。这可能会影响 chunk 的结果文件名。
reuseExistingChunk: true,
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
},
},
},
},
};

webpack知识延展

线上和本地运行结果不一致，一直是一件让前端开发者头痛的问题。造成这种情况的原因之一呢？是因为场景不一样，webpack提供了两种模式。

Development 模式：

在开发模式下，Webpack 会生成映射文件（source map），以便于调试代码。
生成的代码不会被压缩，可读性更强，包括注释和格式化。
启用了热模块替换（Hot Module Replacement），可以在不刷新页面的情况下更新模块。
通常会有更多的详细的错误日志和警告信息，方便开发者排查问题。

Production 模式：

在生产模式下，Webpack 会对代码进行压缩和优化，以减小文件大小和提高性能。
不会生成映射文件，以减少额外的文件大小。
移除了开发时的一些辅助功能，如热模块替换，以提高性能。
通常会有更少的详细错误日志和警告信息，以减少额外的开销。

我们要杜绝发生线上和本地运行结果不一致的这种情况，需要我们深入了解项目中会用到的webpack，vite，rollup等前端工程化工具的内部打包机制。

知识补充

class="name1 name2"样式覆盖不是根据这里的类名先后来的而是根据生成的样式表中的顺序。

作者：城主北宁
链接：https://juejin.cn/post/7346884660443988019

次写了篇pc端的css重置样式，需要注意的一些事。好多xd留言，马上开动，说说移动端的css样式重置需要注意的一些事。

1、和pc端不同的是，pc需要兼容低版本的浏览器，而移动端这方面的工作就小多了。

2、移动端大胆的用css3吧

那么重置移动端的样式有哪些注意点呢？

容器的大小：
-webkit-box-sizing:border-box; /*webkit核心*/
box-sizing:border-box; /*容器的大小为边框的大小*/
去除input的默认样式：
-webkit-appearance:none;
去除a链接点击菜单时区域高亮
第二种清除浮动(第一种见另一篇css重置样式的那些事)：
说完了。下篇说说bootstrap的滚动监听插件的使用。

在线咨询

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