目录

• 一、总结
• 二、模板-案例切换图片
• 三、模板-全选和反选案例
• 四、模板-全选和反选案例
• 五、模板-全选和反选案例
• 六、第一种创建元素的方式
• 七、第二种创建元素的方式
• 八、点击创建人物
• 九、点击创建列表
• 十、第三种创建元素的方式

一、总结

第一、12行代码，都是需要掌握的（前四个是必须要倒背如流的）

var ulObj = document.getElementById("uu");父级节点  ulObj.parentNode
父级元素  ulObj.parentElement
子级节点  ulObj.childNodes
子级元素  ulObj.children// 总结：以上四个是最常用，兼容所有的浏览器
// 下面是我们扩展的
第一个子节点  ulObj.firstChild ---- IE8中是元素
第一个子元素  ulObj.firstElementChild ---- IE8 不支持
最后一个子节点  ulObj.lastChild ---- IE8中是元素
最后一个子元素  ulObj.lastElementChild ---- IE8 不支持
某个元素的前一个兄弟节点 .previousSibling ---- IE8中是元素
某个元素的前一个兄弟元素 .previousElementSibling ---- IE8 不支持
某个元素的后一个兄弟节点 .nextSibling ---IE8中是元素
某个元素的后一个兄弟元素 .nextElementSibling ---IE8不支持

总结： 从第一个子节点开始，只要是节点：在IE8等低版本浏览器都叫做元素。只要是子元素：IE8等低版本浏览器都不支持

第二、获取属性(用的相对少一些) .getAttributeNode(“id”) — 到此我们把标签、属性、和文本都获取到了

二、模板-案例切换图片

三、模板-全选和反选案例

菜名
饭店
红烧肉
田老师
西红柿鸡蛋
田老师
油炸榴莲
田老师
清蒸助教
田老师

四、模板-全选和反选案例

菜名
饭店
红烧肉
田老师
西红柿鸡蛋
田老师
油炸榴莲
田老师
清蒸助教
田老师

五、模板-全选和反选案例

菜名
饭店
红烧肉
田老师
西红柿鸡蛋
田老师
油炸榴莲
田老师
清蒸助教
田老师

六、第一种创建元素的方式

我们继续加油,给力，也可以把问题直接发到qq群，我们是一个大家庭,互帮互助，效果更好

七、第二种创建元素的方式

八、点击创建人物

九、点击创建列表

十、第三种创建元素的方式