javaScript-DOM操作

DOM（文档对象模式 document object Model）

文档：就是整个HTML网页文档
对象：网页中的每一个标签
模型：表示对象之间的关系方便我们获取操作的对象

操作DOM的步骤：

1.获取操作元素：

//通过id获取标签元素   -- 获取id为box1的标签元素
var box = document.getElementById('box1');
//通过class获取标签元素  -- 获取class为box2的全部标签元素 注意 这里获取的是多个  是数组形式  通过下标来访问  比如box2[0]
var box2 = document.getElementsByClassName('.box2');
//通过标签名获取标签元素  --获取所有标签为div的元素  注意 这里获取的是多个  是数组形式  通过下标来访问  比如div[0]
var divs = document.getElementsTagName('div');
//通过id 或者class 来获取元素的另一种方法
//通过id 获取标签元素  --获取id为box3的标签元素
var box3 = document.querySelector('#box3');
//通过class 获取标签元素  --获取class为box3的标签元素
var box3 = document.querySelector('.box3');
//通过class 获取标签颜色  --获取class为box3的全部标签元素
var box3 = document.querySelectorAll('.box3');
//通过标签名获取标签元素  --获取所有标签为div的元素  --获取第一个
 var box1 = document.querySelector('div');

2.绑定响应事件（回调函数）

//给对象绑定事件
//对象.事件名=function(){}
//比如
box1.onclick=function(){}

常见的事件

onclick 用户点击触发
onload 页面加载完成触发
onfocus 元素获得焦点
onblur 元素失去焦点
onsubmit 提交表单被点击
onmouseover 鼠标移入该元素之上
onmouserout 鼠标移出该元素
onmousemove 鼠标被移动

注意：

一个标签只能绑定一个相同的事件如果给一个标签绑定两个onclick事件的话第一个事件会失效
若想给一个标签绑定多个相同的事件的话使用addEventListener(‘去掉on的事件名称’，function(){});
可以同时为一个元素的相同事件同时绑定多个响应函数
```
//例如：
box1.addEventListener('click',function(){});
```

3.具体操作：

DOM操作节点

document.createElement(‘标签名称’); —-创建元素（标签）节点

var btn=document.createElement('button');

document.createTextNode(‘文本内容’); —-创建文本节点
```
var text=document.createTextNode('我是一个按钮');
```
document.createAttribute(‘属性名’);——创建属性节点
```
var sx =document.createAttribute('id');
```
appendChild() ——向父节点添加一个新的子节点用法：父节点.appendChild(子节点);
```
//向上面创建好的按钮元素添加上面创建好的文本节点
btn.appendChild(text);
```
removeChild()——–可以删除一个子节点用法：父节点.removeChild(子节点);
```
document.removeChild(btn);
```
insertBefore()———可以在指定的子节点前插入新的子节点

用法：父节点.insertBefore(新节点,旧节点);

例子：

<html>
<head>
    <script>
        addEventListener('load', function () {
            var box = document.getElementById('box');
            //创建button 元素 节点
            var btn = document.createElement('button');
            //创建 文本节点  内容为 我是一个按钮
            var text = document.createTextNode('我是一个按钮');
            //向button 节点中 添加 text 文本节点
            btn.appendChild(text);
            //向盒子中添加创建好的按钮
            box.appendChild(btn);
        });
    </script>
</head>
<body>
    <div id="box"></div>
</body>
</html>

DOM操作css样式

//通过样式直接设置元素的某一样式
元素.style.属性='值';
如： a1.style.color='red';
//通过样式文本设置多项元素样式
元素.styleText="属性:值;属性:值;属性:值;";
如： a1.cssText="width:500px;height:100px;background:red;";

DOM操作元素属性 (Attribute)

//获取HTML自带的属性  元素.属性  不能获取自定义的属性 如src
id.属性     如： a1.class  a1.id 
//获取标签的属性  可以获取自带的属性也可以获取自定义的属性
id.getAttribute('属性名');  如： a1.getAttribute('class');
//设置或者修改元素的属性  
id.setAttribute('属性名','属性值');  如 a1.setAttribute('id','box2');
//移除元素属性  
removeAttribute('属性名');  如 a1.removeAttribute('id');

DOM操作表单（form）
1. value属性设置或者获取文本框的值
```
a1.value='小钟';    alert(a1.value);
```
2. onsubmit () 可设置用户提交表单触发事件 onreset() 表单重置触发事件
```

<form action=1.php method=post onsubmit='return a()'>
    
</form>
```
3. disabled属性设置或者返回是否禁用文本框
```
a1.disabled='true'   //禁用该内容
```
4. checked属性作用于表单中的checkbox和radio 用于设置或者判断表单的当前状态