DOM（二）

DOM （一）

---

什么是DOM（Document Object Model）：专门操作网页内容的API
HTML：专门编写网页内容的语言
DHTML：所有实现网页动态效果的技术的统称
XHTML：更严格的HTML标准
XML：可扩展的标记语言--可以自定义标签名的语言

DHML 模型

• BOM（Browser Object Model）：专门操作浏览器窗口的API，没有标准，所有用的很少
• DOM（Document Object Model）：专门操作网页内容的API

• DOM：本来是可以操作一切结构化文档：HTML和XML
  核心DOM：可以操作一切结构化文档的API
  万能！但API繁琐
  增删改查
  HTML DOM：专门操作网页内容的API
  其实是基于核心DOM的简化版本
  API简洁！仅对复杂HTML元素提供了简化 -- 不是万能
  实际开发中：优先使用HTML DOM
  HTML DOM实现不了的，用核心DOM补充*

一、DOM tree

---

概念：保存所有网页内容的树状结构，网页中每个内容（元素、文本、属性...）都是树上的节点
DOM tree 的加载过程：

• [ ] 1、在开始加载网页内容前，先创建document节点，document节点是整棵DOM树的树根（查找、创建）
• [ ] 2、顺序读取网页内容，在document节点下，追加子节点

节点间关系

• [ ] 父子：parentNOde childNodes fristChild lastChild
• [ ] 兄弟：previousSibling nextSibling 强调：除了parentNode外，其余都会受空字符的干扰
  遍历节点树：对每个子节点执行相同的操作

递归
概念：函数内，又调用了自己；
何时使用：遍历不确定层级深度树形结构时
如何实现递归：

• [ ] 1、先实现比列直接子节点的方法：
  • [ ] childNodes是动态集合，只有访问动态集合，都会导致重新查找DOM树
  • [ ] 优点：快速返回查找结果
  • [ ] 缺点：每次访问动态集合，都要导致重新查找DOM树--效率低
  • [ ] 遍历时：都要先将length属性存在变量中
• [ ] 2、对每个子节点，在执行和父节点相同的操作 算法：深度优先！优先遍历当前节点的子节点，子节点遍历完，才跳到兄弟节点

递归vs循环

• [ ] 1、递归：
  • [ ] 优点：直观，易用
  • [ ] 缺点：占用更多资源，效率低！
• [ ] 2、循环：
  • [ ] 优点：几乎不占资源，效率高！
  • [ ] 缺点：难度高，代码量大

一、DOM-递归

元素树：仅包含元素节点的树结构
何时使用：只希望访问元素节点时，就使用元素树
如何使用：

1、父子：parentElementNode
     children 兼容IE8
     firstElementChild
     lastElementChild
2、兄弟：previousElementSibling
     nextElementSibling

遍历API：

• 1、NodeItertor：按照深度优先的元素，依次遍历每个节点
  • 如何使用：2步
    • 1、创建NodeIterator
      var iterator=document.createNodeIterator( parent, NodeFilter.SHOW_ALL/NodeFilter.SHOW_ELEMENT null,false );
    • 2、调用iterator的前进和后退方法，获得前一个或后一个节点对象 var node=iterator.nextNode();//下一个
      强调：迭代器开始前，站在parent之前的位置 第一次nextNode()后，才会站在parent上开始遍历
      如果nextNode返回null，说明遍历结束
      var node=iterator.previousNode();
      强调：previousNode如果仅调用一次，就留在原地 连续previousNode两次，才退一步
• 2、TreeWalker：基本用法和NodeIterator完全相同
  • 1、TreeWalker一开始就已经站在开始节点上
• 2、不但可前后移动，还可以向任意方向移动
  - parentNode() firstChild() lastChild() previousSibling() nextSibling()

DOM-查找

• 1 按HTML查找

  • ID
  • 2、标签名
  • name
  • class属性

  如果没有找到，返回空集合，length为0

• 2、Selector API：按CSS选择器查找元素 -- JQuery核心

  • 何时使用：只要查找复杂时，最好用Selector API
  • 如何使用：2个API
    • 1.确定只会找到一个元素时，最好用Selector API
      var elem=document.querySelector("任意css选择器") 万一选择器匹配多个，只返回第一个 强调：如果没找到，返回null
    • 2、希望查找多个选择器匹配的元素时
      var elem=document.querySelectorAll("任意css选择器") 强调：querySelectorAll返回非动态集合 保存了完整的元素属性，每次访问非动态集合，不会导致重新检索DOM树
      如果没有找到、返回空集合，length=0 缺点：返回的效率低

元素的内容

• 1、elem.innerHTML:获取或设置元素的开始标签到结束标签之间的HTML代码内容，没有兼容性问题；
  • 何时使用：只要获得完整的HTML原文时；只要批量设置元素内容时，都要用innerHTML先拼接好字符串，在一次性赋值
• elem.textContent：获取或设置元素开始标签之间的纯文本的正文
  • 忽略HTML标签：将特殊符号翻译为正文
  • 有兼容性问题：老IE:elem.innerText

属性

DOM元素的所有属性节点都保存在一个集合中：attributes
可用下标或属性名访问每一个属性；

• 1、读取属性值：
  核心DOM：elem.attributes[下标/"属性名"] //AttrNode
  • 1、elem.attributes[下标/"属性名"].value
  • 2.*elem.getAttribute("属性名") //value
  • elem.getAttributeNode("属性名") //AttrNode
    elem.getAttributeNode("属性名").value //value
    何时使用：万能即可获得标准属性，又可以获得自定义属性
    HTML DOM：elem.属性名 - 只能获得标准属性
    强调：凡是从页面读取到的属性值都是字符串
• 2、设置属性值：
  核心DOM：
  • *elem.setAttribute("属性名","属性值")
  • elem.setAttributeNode(attrNode)
    何时使用：万能的，即可设置标准属性，又可以设置自定义属性
    HTML DOM：elem.属性名=属性值 - 只能设置标准属性
    强调：无论读取还是写入class属性
    核心DOM：elem.get/setAttribute("class");
    HTML DOM：elem.className
    因为html的标准属性和JS对象中的内置属性class冲突，HTML-DOM中的class被迫改为className
• 3、移除属性
  • 核心DOM：elem.removeAttribute("属性名");
    何时使用：万能
    HTML DOM：elem.属性名="" -- 相当于移除
    何时使用：只能移除标准属性
• 4、判断有没有
  • 核心DOM：elem.hasAttribute("属性名") //返回bool
    强调：万能，即可判断判断标准属性，又可以判断自定义属性
    HTML DOM：elem.属性名!="";

样式

内联样式：优先级最高，会覆盖其他地方的样式，仅仅当前元素可用，不影响其他元素
获取：elem.style.css属性名
强调：带横线的属性名，都要去掉横线，变为驼峰命名，仅能获得内联样式，无法获得继承或层叠来的外部样式；
设置：elem.style.css属性名=‘属性名’
强调：一般程序修改样式，优先修改内联样式（1、优先级高2、不影响其他元素）

添加和删除元素

1、添加单个元素：3步

• 1、创建一个空元素
  语法：var elem=document.createElement('标签名')；
  比如：var a = document.createElement('a');
  

• 2、设置必要的属性
  语法：elem.属性名=值；
  elem.onclick=function(){...}
  比如：
  a.href="http://www.baidu.com"
  a.innerHTML="百度一下"
  百度一下

• 将新元素，加载到指定的DOM树上的父元素
  语法：parent(父元素放入名字).appendChild(elem) //将我们的elem追加到parent的最后一个子元素
  parent.insertBefore(elem,已有元素) //将elem插入在"已有元素"前面 > parent.replaceChild(elem,已有元素) //将elem替换"已有元素"的位置

强调：每一次修改DOM树，都会导致重新layout，频繁修改DOM树，会降低效率 解决：先在内存，将DOM树拼好，再整体加到DOM树里面

批量添加多个平级

• 1、创建一个文档片段：Document Fragment
  文档片段：内存中临时存储多个DOM元素的临时父元素
  何时使用：只要添加多个拼接子元素的时候，都要先将子元素，放入到我们的文档片段中保存（缓存）。
  var frag=document.createDomentFragment();
• 2、将子元素追加到文档片段里，临时保存
  frag.appendChild(子元素)；
  其实frag的用法和普通父元素是完全一样
• 3、将文档片段整体追加到页面
  parent.appendChild(frag);
  强调：Fragment不会出现在DOM树上

删除子元素：parent.removeChild(子元素)；

HTML DOM

1、创建img元素：

var img=new Image（）；

img.src="";
强调：不是所有元素都可以new！只有个别可以

2、select对象：代表一个select元素

属性：option：获得select下所有的option子元素的集合！（下标访问、length属性、遍历）
方法：add（option）：将option添加到select下，相当于：appendChild(option)
事件：onchange:当选中项发生改变的时候触发

3、option对象：代表select下面一个option
var opt= new Option（innerHTML，value）
相当于：

var opt=document.createElement("option")
            opt.innerHTML
            opt.value
简写：创建option后，立刻追加到select中
    select.add(new Option(text,value));

4、table对象：代表HTML的table元素
属性：rows获得所有的行
方法：insertRow（i） 返回tableRow对象
deleteRow（i）删除掉下标选的行

5、tableRow对象：代表html表格行
属性：cells 获得所有的格(td)
innerHTML
rowIndex 获取当前tr在整个table中的下标
方法：insertCell(i) 返回tableCell对象
deleteCell(i) 删除掉下标为i的td

7、form对象：代表的是一个form元素
获得form元素：document.forms[i/"id"/"name"]
方法：submit();手动提交
事件：onsubmit：当正式提交表单之前，自动触发，专门用来在表单条件前，实现验证
查找表单里面的元素：form.elements[i/"id"/"name"]
可简写：form.id/name
只能找到带name属性的数据采集元素(input)或按钮
elem.focus();//让指定元素获得焦点