JS DOM操作

一.什么是DOM

事件基础文档对象模型(Document Object Model,简称DOM)

二.获取元素的方式

根据id获取元素

 var div1 = document.getElementById("box1");

通过类名获取元素

var p1Arr = document.getElementsByClassName("p1");

伪数组定义

1、拥有length属性,其它属性(索引)为非负整数(对象中的索引会被当做字符串来处理,这里你可以当做是个非负整数串来理解)
2、不具有数组所具有的方法

伪数组,就是像数组一样有 length 属性,也有 0、1、2、3 等属性的对象,看起来就像数组一样,但不是数组

常见的参数的参数 arguments,DOM 对象列表(比如通过 document.getElementsByTags 得到的列表)

通过标签名获取元素

var tag1 = document.getElementsByTagName("div");

通过name名获取元素

 var userList = document.getElementsByName("user");

通过选择器的querySelector获取元素

querySlector():获取指定选择器的第一个元素,参数就是选择器的名称

通过选择器的querySelectorAll获取元素

querySelectorAll():获取指定选择器的所有的元素,参数就是选择器的名称

二.事件

事件三要素

事件源:触发(被)事件的元素

事件类型:事件的触发方式(例如鼠标点击或键盘点击)

事件处理程序:事件触发后要执行的代码(函数形式)

事件的基本使用

鼠标单击事件:onclick    浏览器加载完成事件:onload

事件写法

HTML内部书写所有

HTML行内触发方法

HTML外部书写

非表单元素的属性操作

href、title、id、src、className width height等等

添加src属性值显示图片

imgBox.src = "images/jie.jpg";

改变图片大小

imgBox.width = 750;

 imgBox.height = 500;

通过style改变宽高

imgBox.style.width = 750 + "px";

imgBox.style.height = 500 + "px";

/通过样式属性设置宽高、位置的属性类型是字符串,需要加上px

凡是css中这个属性是多个单词的写法,在js代码中DOM操作的时候.把-干掉,后面的单词的首字母大写即可

通过类名改变宽度

  imgBox.className = "imgCl";

//className 会覆盖之前设置好的类名!

隐藏元素

1、src=""

2、display=none; 不占位置的

3、visibility="hidden

this的指向问题

1.普通函数中,this指向window

2.构造函数中,this指向实例化对象

3.对象函数中,this指向当前对象

4.事件函数中,this指向事件源

表单元素属性操作

value 用于大部分表单元素的内容获取(option除外)

type 可以获取input标签的类型(输入框或复选框等)

disabled 禁用属性checked 复选框选中属性

selected 下拉菜单选中属性

checked 

文本内容属性

innerText和textContent

设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8及以下不支持

设置标签中的文本内容,应该使用innerText属性,谷歌,火狐,IE8都支持

innerText和innerHTML的区别

使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的

innerHTML是可以设置文本内容

innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的

想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML

都是用来获取DOM中的文本内容

innertext  只能解析标签

innerHTML 可以解析富文本

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李时一

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值