Java Script:DOM操作

1.webapi

浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

web API特指浏览器提供的API

2.DOM概念

是W3C组织推荐的处理可扩展标志语言的标准编程接口（其实就是处理html的接口）

3.获取元素的方式

        除了根据id获取元素、通过选择器的querySelector获取元素是非伪数组，其他都是伪数组，伪数组需要通过索引加下标的方式访问

        伪数组定义：和数组类似，可以通过下标方式取出内容，也可以通过for循环遍历，但是不能用数组方法

顶层对象：document 

1、根据id获取元素（非伪数组）

  var div1 = document.getElementById("box1");    //只能拿到一个，多个id,只能拿到第一个

2、通过类名获取元素（伪数组）

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

 3、通过标签名获取元素（伪数组）

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

 4、通过name名获取元素（ 伪数组）

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

 5、通过选择器的querySelector获取元素（非伪数组）

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

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

 6、通过选择器的querySelectorAll获取元素 （伪数组）

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

 var boxList = document.querySelectorAll(".box1");

4.事件 

（1）事件三要素

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

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

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

（2）事件的基本使用

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

（3）事件触发的多种写法

        HTML内部书写所有

        HTML行内触发方法

        HTML外部书写

 5.非表单元素的属性操作

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

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";

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

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

4.通过类名改变宽度

  imgBox.className = "imgCl";

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

5.隐藏元素

（1）src=""

（2）display=none; 不占位置的

（3）visibility="hidden”

 6.this的指向问题

• 普通函数中，this指向window
•  事件函数中，this指向事件源
• 对象函数中，this指向当前的对象
•  构造函数中，this指向实例化对象
• 定时器里面this指向window  (setInterval和setTimeout)

 6.表单元素属性操作

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

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

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

        selected 下拉菜单选中属性

        checked

 7.文本内容属性

 innerText和innerHTML的区别：

        共同点：都会覆盖原有内容，如果都想要，将”=”换成”+=”

        不同点：

                innerText主要是设置文本的,设置标签内容,是没有标签的效果的，保持原样输出

                innerHTML是可以设置文本内容,会解析富文本