从零开始学 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的梦呓

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

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180614G1P1ZG00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券