侧边栏壁纸
博主头像
惊羽博主等级

hi ,我是惊羽,前生物学逃兵,现系统工程沉迷者 . 贝壳签约工程师 , 曾被雇佣为 联拓数科 · 支付研发工程师 、京东 · 京东数科 · 研发工程师、中国移动 · 雄安产业研究院 · 业务中台技术负责人 .

  • 累计撰写 101 篇文章
  • 累计创建 14 个标签
  • 累计收到 14 条评论

js(1) - DOM操作

惊羽
2021-03-16 / 0 评论 / 0 点赞 / 154 阅读 / 1,857 字
温馨提示:
本文为原创作品,感谢您喜欢~

1. DOM操作

1.1 定义

document object model 文档(html/xml)对象模型
html文档加载到浏览器的内存中后,我们认为形成了一颗DOM树(家谱树),即html标签按照层级结构而形成了一颗“家谱树”,而任何一个html标签、标签属性和文本都是这个树上的节点元素。
我们可以通过js的DOM组件中的方法对内存中的DOM树上的结构和内容进行修改,即通过js动态的修改内存中的那一份html及css的代码。

1.2 js的DOM的操作方法

1.2.1 标签元素的操作
1)获得元素对象:

根据id获得一个元素:getElementById(id属性值)
根据标签名称获得多个元素:getElementsByTagName(标签名称)
根据class属性获得多个元素:getElementsByClassName(class的属性值)
根据name属性获得多个元素:getElementsByName(name属性值)

2)创建一个新元素createElement()
3)将元素放到某个父元素的内部appendChild()
4)标签体的获取与设置:innerHTML
1.2.2 属性的操作

获得属性的值:getAtrribute(name)
设置属性的值:setAtrribute(name,value)
删除某个属性:removeAtrribute(name)

2. 内置对象

js的对象也分为自定义对象(通过函数模拟) 和 内置对象
与java一样,js也内置一些现成的对象供我们使用,js中内置对象有如下几个:

2.1 Array对象

Array对象是数组对象,跟java中的数组一个意思,但是使用语法上稍微有些区别。

2.1.1 创建数组对象的方式

创建一个空数组:var arr = new Array();
创建一个指定大的数组:var arr = new Array(size);
创建数组并填充元素:var arr = new Array(element0, element1, ..., elementn);
直接创建元素数组:var arr = [element0, element1, ..., elementn];

2.1.2 数组中元素的获取

跟java一样通过索引的方式获得数组中的元素:
获得数组中的一个元素:arr[0]

// 遍历获得数组中的所有元素
for(var i=0;i<arr.length;i++){
	alert(arr[i]);
}
2.1.3 多维数组操作
// js中的数组跟java中的集合相似,也就是数组中的元素还是以是数组
arr = [
		[1,2,3],
		[4,5,6],
		[7,8,9]                  
	]
// 获取数组中的8数字可以:arr[2][1];

2.2 日期对象

2.2.1 创建方式

创建当前日期时间:var date = new Date();
创建指定日期时间:var date = new Date(毫秒值);
其中毫秒值为1970-01-01至今的时间毫秒值

2.2.2 时间的获取

获得年:getFullYear() 从 Date 对象以四位数字返回年份。
获得月:getMonth() 从 Date 对象返回月份 (0 ~ 11)。
获得星期:getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
获得日:getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
获得毫秒值 :getTime() 返回 1970 年 1 月 1 日至今的毫秒数。

2.2.3 Math对象

Math对象是数学对象,是一个工具对象,因此Math对象不用使用new的方式创建,直接使用Math就可以调用对象内部的方法。
abs(x) 返回数的绝对值。
ceil(x) 对数进行上舍入。
floor(x) 对数进行下舍入。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。

0
广告 广告

评论区