1.增加节点
1.1document.write
document.write(' 标签名 ');
document.write('<h3></h3>');
1.2innerHTML
节点.innerHTML=' 标签名 ';
这种方式有覆盖性， 不推荐单独使用。
**1.3动态添加 **
var 标记= document.createElement('标签名')；
添加完节点后需要将节点放到指定位置才能被我们正常使用。因此通常将添加语句和追加语句结合使用。
var b_tr = document.createElement('tr');
// 添加tr
tbody.appendChild(b_tr);
// 在tbody里面追加tr
1.4追加和插入节点
（1）追加节点 ： 父节点.appendChild(子节点)（向子节点列表的末尾添加新的子节点）
（2）插入节点 父节点.insertBefore(新节点，旧节点)；（会将新节点添加在旧节点后面）
2.删除、克隆、替换节点
2.1删除节点
父节点.removeChild(子节点)
2.2克隆节点
var cnode=node.cloneNode(true);
括号里面可以写true或者false,默认是false,true可以把内容一块克隆了，false只能克隆标签。
2.3替换节点
父节点.replaceChild(新节点，已存在的节点)
3.事件
3.1什么是事件
JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为（就是触发响应机制）。网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。
3.2事件三要素
- 事件源（触发事件的元素）。
- 事件名称（类型）
- 事件的处理程序（就是一个函数，函数内部写入这个事件要做什么）。
3.3事件的种类
（1）传统事件（简单但不利于团队合作,和html没有完全分离，多次添加重复事件会覆盖）
<button onclick="text1()"></button>
（2）脚本模型----现代事件 （利于团队合作，on+事件名称）
格式：btn.οnclick=function(){}或者
btn.οnclick=show;(此处函数名后不加括号)
function show(){
}
<button id="btn">脚本模型点击</button>
<script>
function text1() {
console.log('单击事件已被执行');
// 此处不建议用document.write('')输出，页面会重绘，就不显示按钮的存在了
}
var btn=document.querySelector('#btn');
btn.onclick=function(){}
// 或者
btn.onclick=text1;//注意函数名后不能加括号
// 此方法不足的地方，同样的注册事件只能添加一次，多次添加会覆盖
</script>
（3）新事件 w3c事件（加同样注册事件可以注册多个监听器，然后按照多个注册顺序依次执行）
兼容性注册（绑定、添加）事件解绑（删除）事件
ie9+
btn.addEventListenter('click',function(){},false) 或者 btn.addEventListenter('click',函数名,false) false可以省略，表示冒泡机制
btn.removeEventListenter('click',函数名);
ie8
btn.attachEvent('onclick',function(){})
btn.detachEvent('onclick',function(){});
兼容所有版本
btn.οnclick=function(){}
btn.οnclick=null;
3.4常见事件名称（类型）汇总
鼠标事件触发条件 onclick 单击onmouseover 鼠标经过（有冒泡机制）onmouseout 鼠标离开（有冒泡机制）onmouseenter 鼠标进入onmouseleave 鼠标离开 onmousedown 鼠标按下 onmousemove 移动鼠标onmouseup 释放鼠标** onfocus ** 获取焦点** onblur **失去焦点
4.操作元素的属性
4.1修改和获取属性三种方法汇总
（1）方法一：
修改：节点对象.属性名=属性值;
获取： var 变量= 节点对象.属性名;
（2）方法二：
修改：节点对象[属性名]=属性值；
获取： var 变量=节点对象[属性名];
（3）方法三：自定义属性
节点对象.setAttribute(属性名，属性值)
var 变量= 节点对象.getAttribute(属性名)
4.2常用DOM属性汇总
HTML标记的属性 DOM元素属性src、alt、id、style...src、alt、id、style...classclassNamefor****htmlFor
4.3改变元素内容
（1）改变内容(文字)
node.innerText='值'
.innerText这个方法没有解析标记的能力，对原来的内容有覆盖性，但它去除html标签,同时去掉空格和换行。
(2)改变内容和标签
node. innerHTML='值'
innerHTML 对原来的内容有覆盖性，会将标签内所有内容都打印出来，包括html标签，同时保留空格和换行。
4.4表单元素的属性操作
（1）通过value值来操作
type='text/password/file/submit/reset' 和多行文本框textarea还有选择框select可以通过取出value的值来进行操作。如果有value就取value中的值，当 value='' " 取出为空，如果没有就取出输入框中的值。
(2)通过checked值来操作
单选钮和复选框可以通过checked来操作。eg: radio.checked=true; 此时，选中时true,未选中是false.
(3)通过disabled(按钮是否禁用)值来操作
按钮可以设置disabled值来完成一些操作。此时， true是按钮不可用 false 是按钮可用。
4.5样式属性操作
我们可以通过.style和.className这两种方式来修改元素大小、颜色等样式。其中element. style是 行内样式操作。element. className 是类名样式操作，可以用来修改元素的类名。
（1）设置或修改样式（只有一种方法）
dom节点.style.样式名=样式值；（此时设置的样式都是行内样式，优先级比较高）注意：在js里面修改的样式采用驼峰命名法
element.style.textAlign=center
（2）获取样式（两种方法）
方法一(只能获取行内样式)：var stylev=dom节点.style.样式名;
方法二（行内和外部都可以渠道，只读属性）： window.getComputedStyle(dom节点对象，null).样式名 （ window.getComputedStyle(dom节点对象，伪类).样式名可以取到伪类的样式）
<body>
<div id="box">
</div>
<script>
var box = document.querySelector('#box');
box.style.width='200px';
box.style.height="200px";
box.style.backgroundColor='#333';
box.style.margin='auto';
var w1=box.style.width;
console.log(w1);
var h1=window.getComputedStyle(box,null).height;
console.log(h1);
</script>
</body>
版权归原作者 shan33__ 所有， 如有侵权，请联系我们删除。