专业网站建设品牌，十四年专业建站经验，服务6000+客户--广州京杭网络

免费热线：400-683-0016      微信咨询  |  联系我们

• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

css群集选择器，dom操作_CSS学习

当前位置：网站建设 > 技术支持

1、css群集选择器，dom操作？

文档对象模型( DOM, Document Object Model )主要用于对HTML和XML文档的内容进行操作。DOM描绘了一个层次化的节点树，通过对节点进行操作，实现对文档内容的添加、删除、修改、查找等功能。

一、DOM树

DOM树有两种，分别为节点树和元素树。

节点树：把文档中所有的内容都看成树上的节点；

元素树：仅把文档中的所有标签看成树上的节点。

二、DOM常用操作

2.1 查找节点

document.getElementById('id属性值');

返回拥有指定id的第一个对象的引用

document/element.getElementsByClassName('class属性值');

返回拥有指定class的对象集合

document/element.getElementsByTagName('标签名');

返回拥有指定标签名的对象集合

document.getElementsByName('name属性值');

返回拥有指定名称的对象结合

document/element.querySelector('CSS选择器');

仅返回第一个匹配的元素

document/element.querySelectorAll('CSS选择器');

返回所有匹配的元素

document.documentElement

获取页面中的HTML标签

document.body

获取页面中的BODY标签

document.all['']

获取页面中的所有元素节点的对象集合型

2.2 新建节点

document.createElement('元素名');

创建新的元素节点

document.createAttribute('属性名');

创建新的属性节点

document.createTextNode('文本内容');

创建新的文本节点

document.createComment('注释节点');

创建新的注释节点

document.createDocumentFragment( );

创建文档片段节点

2.3 添加新节点

parent.appendChild( element/txt/comment/fragment );

向父节点的最后一个子节点后追加新节点

parent.insertBefore( newChild, existingChild );

向父节点的某个特定子节点之前插入新节点

element.setAttributeNode( attributeName );

给元素增加属性节点

element.setAttribute( attributeName, attributeValue );

给元素增加指定属性，并设定属性值

2、CSS的类选择器和id选择器各有什么优势？

ID用于标识页面上的特定元素（比如站点导航），而且必须是唯一的。 ID也可以用来标识持久的结构性元素，例如主导航或内容区域。ID还可以用来标识一次性元素，例如某个链接或表单元素。一个ID只能应用于页面上的一个元素。

class同一个类名可以应用于页面上任意多个元素，因此类的功能强大的多。类非常适合表示内容的类型或其他相似的条目。

在实际开发中，要根据实际使用情况来决定是使用哪种样式。对于单一元素的在单一界面的展示样式可以推荐是用id来定位。多余多个界面公用，或者同一界面多个元素风格一致，样式统一使用class类要方便的多。

下面就是最简单的一个小例子：

展示效果：

3、postcss和cssmodule是什么？

postcss是什么？

根据官网的解释，它是一种javascript编写的工具，用来转化css的。可以认为它是处理css的插件集合，需要配合诸如webpack、gulp等编译工具才能展现它强大的能力。

目前社区提供了非常多的插件，比较有名的如下：

autoprefixer 可以为css的属性配置兼容性的前缀，不需要手动添加postcss-preset-env 允许你使用更加现代的css特性stylelint 检查css语法错误cssnano css的压缩器等等postcss的原理

如果大家了解babel的原理，那就应该听说过AST即抽象语法树。编译器将字符串进行词法分析、语法分析，再做转换，最终达到预期的结果。postcss也是同样的原理，这个包已经为使用者提供了解析的方法parse，并且也提供了很多转化的API，利用这些就可以自己开发一款postcss插件了。

css Module是什么？

先前呢，我们使用css选择器，它是对整个页面是有效的，也就是全局的，当你每次迭代需求的时候，需要考虑每次添加新的css是否会影响到其他地方，所以我们有时选择为样式表添加命名空间。css Module为我们提供了另外一种开发方式，它可以使css具有局部作用域。

用法如下：

用法是如此的简单，基本一看就会，css-loader为我们提供了css Module的开关，只要为css-loader添加参数选项modules就可以开启。注意：它必须放在less或者sass的loader之前。

那它如何做到局部作用域的呢？

打开element面板可以发现，它把class变成了md5戳，对应每个组件，保持唯一。

vue的scoped

由此我们联想到vue的scoped，它也解决了css局部作用域的问题！

它在dom上生成了一个data属性，并且给class选择器添加了属性选择器，类似于之前的md5戳。不过由于添加了属性选择器，使得选择器的优先级变高了，想在组件外面覆盖css属性就变得不那么容易了！

喜欢我的回答就关注我吧，有问题可以发表评论，我们一起学习，共同成长！

4、css3新增功能？

1、css3新增的超级选择器：属性选择器、结构性伪类选择器、UI元素状态伪类选择器、通用兄弟元素选择器

2、使用选择器在页面中插入文字、图片、项目编号等内容

3、文字阴影与自动换行

4、各类盒模型：总体分为block类型和in line类型，在细分为inline-block类型、inline-table类型、list-item类型、run-in类型、compact类型、表格相关类型、none类型

5、盒模型相关的属性：overflow属性（内容溢出）、box-shadow属性（盒阴影）、box-sizing属性（宽高计算）

6、新增的背景样式backround-clip属性、backround-origin属性、backround-size属性、backround-break属性

7、新增的边框样式：border-radius属性（圆角边框）、border-image属性（图片边框）

8、新增的 transform变形功能：rotate（旋转）、scale（缩放）、skew（倾斜）、translate（移动）

9、新增的动画功能：transition（平滑过渡）、animation（关键帧）

10、布局相关样式：多栏布局、盒布局、弹性盒布局

11、兼容性问题