11-17的学习总结(DOMfirstday)

时间:2023-03-09 16:18:14
11-17的学习总结(DOMfirstday)

HTML: 超文本标记语言,专门定义网页内容的语言
XHTML: 严格的HTML标准
DHTML: 所有实现网页动态效果技术的统称
XML: 可扩展的标记语言,标签都是自定义的
XML语法和HTML语法完全相同!——结构化数据

Node类型

  1. nodetype  返回数字
  2. nodeName("元素名称的大写形式") 当前节点的名称
  3. nodevalue获得当前节点的值,对元素节点无效

递回遍历节点树(尤其重要!)

算法:深度优先遍历!
优先遍历下级节点,直到碰到叶子节点,才返回并更换另一个分支继续遍历下级节点。
递归:函数自己内部又调用了自己。

                      遍历API:2个:NodeIterator TreeWalker
内部同样使用深度优先算法
  2步:
1. 创建迭代器对象:
var iterator=document.createNodeIterator(
开始节点对象,
显示何种节点,//NodeFilter.SHOW_ALL
//NodeFilter.SHOW_ELEMENT
null,false
);
*迭代器开始时,站在第一个节点的前一个位置!
两个方法:var nextNode=iterator.nextNode();
让迭代器向下一个对象跳一步
同时返回跳到的对象
如果没有下一个节点了,则返回null
iterator.previousNode();
2. 利用循环推动迭代器反复向下一个节点移动

                      TreeWalker vs NodeIterator
创建和深度遍历的方法,完全一样
        区别1:TreeWalker一开始就站在开始节点上
Iterator一开始站子开始节点之前的空位置
        区别2:扩展了更灵活的跳转方法
parentNode(),firstChild(),nextSibling()...

          Selector API: 专门利用css选择器查找任意元素的方法(jquery的核心!)
var elem=parent.querySelector("选择器");
只返回第一个匹配的元素对象
何时使用:只找一个元素时,使用!
var elems=parent.querySelectorAll("选择器");