1.查找节点：
孩子节点：children 所有的子元素
firstElementChild 第一个子元素
lastElementChild 最后一个子元素
firstChild 第一个子节点
lastChild最后一个节点
实际中一般不会用系欸但，主要是对元素进行操作
兄弟节点: previousElementSibling 上一个兄弟元素
nextElementSibling 下一个兄弟元素
父节点：parentNode
2.添加节点
parent.append() 往父节点内容的最后面添加
parent.insertBefore(a,y) 往任意指定位置y的前面添加a
两个参数必须写，当第二个参数为null,undefined 时，效果和appendChild一样
如果对于页面中已有的元素，就是剪切的效果
3.克隆节点
cloneNode(deep)
deep是布尔类型，为true，表示深拷贝，标签+内容，如果有id值，需要重新设置，页面中id值是唯一的
如果值为false,表示浅拷贝，只复制标签
注意：拷贝出来的和原来之间的修改是互不影响的
4.删除节点
parent.removeChild() 父元素调用
5.创建节点
1.document.write() 只能往页面中写，页面加载产生文档流存在覆盖问题
2.innerHTML 可以识别标签，慎用，也会存在覆盖问题
3.document.createElement(tagName)
（1）创建出来的元素是存储在内存中
(2) 需要手动添加到页面中
(3) 参数：字符串类型的标签名
事件-----概念：触发-----响应的机制
三要素：事件源，事件名称，事件处理程序
注册事件:事件源 on + 事件名称 = function() {...}
事件触发了才会执行函数
函数不需要带哦用，浏览器帮我们调用执行
表单属性-------常用的有:type name value checked selected disabled
布尔类型的有: checked selected disabled
具体说明: 在标签中，只要有这个属性，就能起到作用，dom对象属性值是布尔类型(true,false)
例题：实现全选
页面结构：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 300px; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微软雅黑"; color: #fff; } td { font: 14px "微软雅黑"; } tbody tr { background-color: #f0f0f0; text-align: center; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } </style> </head> <body> <div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="j_cbAll" /> </th> <th>菜名</th> <th>饭店</th> </tr> </thead> <tbody id="j_tb"> <tr> <td> <input type="checkbox" /> </td> <td>红烧肉</td> <td>田老师</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>西红柿鸡蛋</td> <td>田老师</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>红烧狮子头</td> <td>田老师</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>日式肥牛</td> <td>田老师</td> </tr> </tbody> </table> </div> </body> </html>
js的代码
<script>
var all = document.getElementById(‘j_cbAll‘);
var tbody = document.getElementById(‘j_tb‘);
var inps = tbody.getElementsByTagName(‘input‘);
//首先给头部的全选添加点击事件，让下面所有的input的checked属性和全选一致
all.onclick = function () {
var checked = this.checked;
for (var i = 0; i < inps.length; i++) {
inps[i].checked = checked;
}
};
//给下面的每一个input添加点击事件
for (var i = 0; i < inps.length; i++) {
inps[i].onclick = function () {
//假设成立法
//假设所有的都是被选中的
//推翻结论，找是否有没有被选中的
//假设所有的input都被选中了
var flag = true;
//遍历每一个input，判断是否有没被选中的
for(var i = 0; i< inps.length ; i++){
if(inps[i].checked === false){
flag = false;
break;
}
}
//最后判断flag的值给全选设置checked值
all.checked = flag ;
}
}
</script>
这个题目中主要用到的一种思想就是假设成立法，假设一个结论，然后去推翻结论的过程。