发表于： 2019-05-08 21:53:33
1 907
今天完成的事情：
1.学习JS获取HTML DOM元素
2.学习javascript的Math对象
明天计划的事情：
1.学习javascript的setTimeout和setInterval
2.对js任务一进行编码
3.继续学习JavaScript
遇到的问题：
1.js如何生产随机颜色？
方法一（随机RGB颜色值）#####
//颜色对象
function Color(){
this.r = Math.floor(Math.random()*255);
this.g = Math.floor(Math.random()*255);
this.b = Math.floor(Math.random()*255);
this.color = 'rgba('+ this.r +','+ this.g +','+ this.b +',0.8)';
}
方法二 （生成十六进制的颜色值）
var getRandomColor = function(){
return '#' + (function(color){
return (color += '0123456789abcdef'[Math.floor(Math.random()*16)])
&& (color.length == 6) ? color : arguments.callee(color);
})('');
}
随机生成6个字符然后再串到一起，闭包调用自身与三元运算符让程序变得内敛，初心者应该好好学习这种写法。
方法三
var getRandomColor = function(){
return (function(m,s,c){
return (c ? arguments.callee(m,s,c-1) : '#') +
s[m.floor(m.random() * 16)]
})(Math,'0123456789abcdef',5)
}
把Math对象，用于生成hex颜色值的字符串提取出来，并利用第三个参数来判断是否还继续调用自身。
收获：
1.学习JS获取HTML DOM元素
1）HTML DOM
文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。我们用JavaScript对网页进行的所有操作都是通过DOM进行的。
2）JS获取DOM元素的方法
1.通过ID获取（getElementById）
1 | document.getElementById('id') |
用法：
1.上下文必须是document。
2.必须传参数，参数是string类型，是获取元素的id。
3.返回值只获取到一个元素，没有找到返回null。
2.通过name属性（getElementsByName）
1 | document.getElementsByName('name') |
用法：
1.上下文必须是document。
2.必须传参数，参数是是获取元素的name属性。
3.返回值是一个类数组，没有找到返回空数组。
3.通过标签名（getElementsByTagName）
1 2 3 | document.getElementsByTagName('p');var oDiv = document.getElementById('divId');oDiv.getElementsByTagName('p'); |
用法：
1.上下文可以是document，也可以是一个元素，注意这个元素一定要存在。
2.参数是是获取元素的标签名属性，不区分大小写。
3.返回值是一个类数组，没有找到返回空数组。
4.通过类名（getElementsByClassName）
用法（和getElementsByTagName类似）：
1.上下文可以是document，也可以是一个元素。
2.参数是元素的类名。
3.返回值是一个类数组，没有找到返回空数组。
5.获取html的方法（document.documentElement）
document.documentElement是专门获取html这个标签的。
6.获取body的方法（document.body）
document.body是专门获取body这个标签的。
7.通过选择器获取一个元素（querySelector）
用法：
1.上下文可以是document，也可以是一个元素。
2.参数是选择器，如："div .className"。
3.返回值只获取到一个元素。
8.通过选择器获取一组元素（querySelectorAll）
用法同querySelector类似：
1.上下文可以是document，也可以是一个元素。
2.参数是选择器，如："div .className"。
3.返回值是一个类数组。
返回列表
评论