DOM操作

获取元素方式：

1.根据id获取元素

document.getElementById()

2.根据类名

document.getElementsByClassName()

伪数组定义：

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

3.根据标签名获取元素

document.getElementsByTagName()

4.根据name名获取元素

document.getElementsByName()

5.通过选择器获取元素

document.querySlector();获取指定选择器的第一个元素，参数就是选择器的名称

6.通过选择器获取元素

document.querySlectorAll() 获取指定选择器的所有的元素

 

 

事件三要素

事件源：触发事件的元素

事件类型：事件的触发方式

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

 

事件基本使用

<script>

var box = document.getElementById('box');

box.onclick = function () {

console.log('代码会在box被点击后执行');

};

</script>

 

非表单元素的属性操作

 1.添加src属性值显示图片

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

2.改变图片大小

 

imgBox.width = 750;

    imgBox.height = 500;

 

3.通过style改变宽高

 

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

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

 

4.通过类名改变宽度

 

 imgBox.className = "imgCl";

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

 

5.隐藏元素

1、src=""

2、display=none; 不占位置的

3、visibility="hidden

 

6.this的指向问题

①      普通函数中，this指向window

②       构造函数中，this指向实例化对象

③       对象函数中，this指向当前的对象

④      事件函数中，this指向事件源

 

7.表单元素属性操作

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

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

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

selected 下拉菜单选中属性

checked 默认选项

 

8.文本内容属性

 

innerText 和textContent（一般不用）

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

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

返回被选元素的文本内容

 

innerText 和innerHTML

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

innerHTML是可以设置文本内容

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