一. DOM 1. 什么是DOM Document Object Model(文档对象模型) 缩写：DOM 针对于HTML和XML文档提供的API(应用程序接口) DOM描述的是层次化的节点树（倒置的树），开发人员使用DOM对节点进行增加、删除、修改、获取 2. DOM树 也叫节点树 DOM树中所有的节点可以通过JS访问，都可以被增加、删除、修改、查看 文档中的一切都是节点 3. 节点类型 html文档中的一切都是节点（node） 整个文档是一个文档节点 document 文档中可见的每一个HTML元素都是元素节点 文档中的所有文本都是文本节点（空格回车都是文本节点） 文档中的每一个HTML元素的属性都是属性节点 src id class 文档中的所有注释都是注释节点 <!-- --> 4. DOM节点关系 1）子节点 仅对儿子有效，不能获取孙子 childNodes获取所有的子节点，包括文本节点，注释节点 children 获取标签类型的子节点 2）父节点 parentNode：父亲节点，只有一个 3）兄弟节点 下一个兄弟 nextSibling 获取下一个任意类型的兄弟节点 nextElementSibling 获取下一个元素类型的兄弟节点 上一个兄弟 previousSibling 获取上一个任意类型的兄弟节点 previousElementSibling 获取上一个元素类型的兄弟节点 4）第一个最后一个儿子节点 第一个子节点 firstChild: 获取第一个任意类型的子节点 firstElementChild: 获取第一个元素类型的子节点。 最后一个子节点 lastChild: 获取最后一个任意类型的子节点 lastElementChild: 获取最后一个元素类型的子节点。 5）属性节点 getAttributeNode: 从当前元素中获取某个属性节点 结构： <div id="d1"> <div class="d2"></div> </div> <p></p> <!-- 注释 --> 你好 js： 1）在控制台输出所有body子节点 2）在控制台输出body所有元素类型的子节点 结构： <ul> </ul> <div> <span>x</span> <img src=""> </div> js: 1) 获取ul的父节点，输出到控制台 2）获取第一个li的父节点，输出到控制台 3）点击‘x’按钮，隐藏父元素 结构： <ul id=""> <li class="">123</li> <!--comment--> hello <li>你好</li> <li>456<span>span标签</span></li> <li>hello</li> </ul> js： 1）获取第一个li的下一个兄弟节点，输出到控制台 2）获取第一个li的下一个兄弟节点（元素），输出到控制台 3）获取第二个li的上一个兄弟节点，输出到控制台 4）获取第二个li的上一个兄弟节点（元素），输出到控制台。 案例：（04.第一个和最后一个节点.html） 结构： <ul id=""> <li class="">123</li> <!--comment--> hello <li>你好</li> <li>456<span>span标签</span></li> <li>hello</li> </ul> js： 1）获取ul的第一个子节点，输出到控制台 2）获取ul的第一个子节点（元素），输出到控制台 3）获取ul的最后一个子节点，输出到控制台 4）获取ul的最后一个子节点（元素），输出到控制台 结构： <div class="d1" id="hello" abc="t" b = "bbb">hello</div> js: 1)控制台输出div的class属性节点 2）控制台输出div的id属性节点 3）控制台输出div的abc属性节点 4）控制台输出div的b属性节点 5）控制台输出div的a属性节点
转载于:https://www.cnblogs.com/yangjingyang/p/10210458.html
相关资源：dom4j-1.6.1.jar (dom4j) 欢迎下载