DOM笔记

今日日志

• 学习内容：

  1. 事件的概念
  2. DOM文档对象模型
  3. DOM的节点类型
  4. DOM节点的属性
  5. DOM节点的访问
  6. DOM节点的创建

• 今日练习项目

  1. 购物全选：读取全选按钮并将全选按钮的值付给其他的复选键

     function checkAllOrNo(){
     				//1.取到所有的bookinfo
     				var allbook = document.getElementsByName("bookinfo");
     				var ch = document.getElementById("all");
     				//2.点击的是选中or未选中
     				
     				//3.选中或未选中的值Boolean
     				for(var b of allbook){
     					b.checked = ch.checked;
     				}
     			}
     

• 易错点和补充知识点：

  1. 获得节点数组是一定确定数组中是同类元素，否则在调用属性时容易报错
  2. 获取元素属性有两种方式1)nodeName.getAttribute(“节点属性名”);2)nodeName.节点属性名
  3. e.append()的两种情况1)当参数为String时是给元素内添加文本内容2)当参数是节点时实现的功能是节点的插入。
  4. 删除节点时要判断是否有该节点，body也可作为父节点来删除body内部的节点。

认识事件

事件指用户的一个操作，如：点击、双击、滑动、移入、移出等操作

事件类型

1. 鼠标事件
2. 键盘事件
3. 表单事件
4. 编辑事件
5. 页面相关事件

DOM文档对象模型

DOM文档模式是W3C组织针对网页中的文档内容，定义的一套程序和脚本动态的访问和更新

DOM的节点

节点类型

1. 文档节点：document表示整个html页面。
2. 元素节点：表示一个元素标签，如：span、div
3. 属性节点：表示元素中的一个属性，如width、height
4. 文本节点：表示标签中间的文字内容，或者标签之间的文字内容。
5. 注释节点：表示注释。

节点的属性

属性	说明	属性	说明
parentNode	获取当前节点的父节点	nodeName	获取当前节点名
childNodes	获取当前节点的子节点集合	nodeValue	获取当前节点值
firstChild	获取当前节点的第一个子节点	ndoeType	获取节点类型
lastChild	获取当前节点的最后一个子节点	innerHTML	显示节点中包含HTML标签的文本内容
previousSibling	获取当前节点的前一个兄弟节点	innerText	显示节点中包含的文本内容
nextSibling	获取当前节点的后一个兄弟节点
attributes	元素的属性列表

对DOM节点的访问

对节点的访问方法

1. 根据元素的ID属性访问

   document.getElementById();

2. 根据元素的名称属性访问

   document.getElementsByName();

3. 根据元素的标签名访问

   document.getElementsByTagName();

4. 向文档写文本、HTML表达式或JavaScript代码

   document.write();

对节点的操作

创建节点

• 简单节点的创建

  var e = document.createElement("元素名");   //创建元素节点
  var t = document.createTextNode("元素内容");//创建文本节点
  e.appendChild(t);                //把元素内容插入元素中去
  

• 复杂节点的创建

  var e = document.createElement("元素名");   //创建元素节点
  e.setAttribute("属性名") = "属性值"；//将元素节点当做一个对象进行赋值
  

插入节点

1. appendChild();

   element.appendChild(“新节点”);

   将新节点放在该节点的内部最为自节点

2. insertBefore();

   element.InsertBefore(“新节点”，ref);

   将新节点插入到ref节点前其中ref为element的子节点，作为element节点的子节点。

3. 删除节点

   element.removeChild(oldChild);

   element指当前节点参数为当前节点的子节点。

4. 复制节点

   element.cloneNode(bool);

   其中bool为布尔值

   1. 为1或true时复制该节点下所有子节点。
   2. 为0或false时只复制节点本身不复制子节点。