从零开始学 Web之DOM（二）对样式操作，获取元素的方式

Daotin的梦呓

从零基础学 Web 前端

大家好，这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「Daotin的梦呓」公众号，同时也会同步到我的相关博客，可以从

关于我

找到我的博客地址，也欢迎大家订阅关注。在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

1、对样式的操作

1.1、点击按钮设置 div 的宽高和背景颜色

凡是 css 属性时由多个单词构成的，那么在 js 中设置的时候需要把 "-" 去掉，然后除第一个单词的首字母大写即可。

比如：css里面的 ，在js里面的写法是 .

1.2、点击按钮隐藏和显示 div 标签

1.3、网页开关灯

document.body 可以选中 body 标签。

1.4、阻止超链接默认跳转

阻止超链接的跳转：返回给 onclick 事件一个，而不单单是 false。

方式二：当使用内联 js 的时候，onclick 里面是 f1() 而不是 f1。是函数的执行，而不是函数体本身。但是在外面写 js 的时候，赋值给 onclick 的是函数体本身，认不是函数的执行。

方式二中之所以加 return，是因为 f1() 执行后返回的是 false，而不是 return false，所以要加一个 return。

方式四：调用事件参数对象的 preventDefault() 方法： 可以阻止超链接跳转。注意 IE8 不支持。

1.5、点击小图在小图下显示大图

使用 阻止链接原本的跳转。

1.6、列表高亮显示

1.7、通过 name 属性获取元素

通过 name 属性获取元素适用于表单标签，基本标签没有 name 属性

基本标签：等

表单标签：等

1.8、根据类样式的名字获取元素

注意：getElementsByClassName 在IE8等低版本浏览器不支持。

2、获取元素的方式总结

1、根据 id 的属性的值获取元素，返回值是一个元素对象

2、根据标签名获取元素，返回值是包含多个元素对象的伪数组

3、根据 name 属性的值获取元素，返回值是包含多个元素对象的伪数组

4、根据 class 类样式的名字获取元素，返回值是包含多个元素对象的伪数组

5、根据 CSS 选择器获取元素，返回值是一个元素对象

6、根据 CSS 选择器获取元素，返回值是包含多个元素对象的伪数组

注意区分是名字还是值。

3、案例：模拟搜索框

文本框注册失去焦点事件的时候使用 ，而不使用 是因为数字的比较比字符串的比较效率更高。

欢迎关注

Daotin的梦呓

如果觉得不错，欢迎分享给其他的小伙伴们 :)