1.节点层次

image.png

Node 类型

node 接口是由 dom 中的所有节点类型实现

常用的是元素和文本节点：
ELEMENT_NODE 1
TEXT_NODE 3
DOCUMENT_NODE 9

操作节点：
常用：
appendChild() 用于向 childNodes列表的末尾添加一个节点
insertBefore() 接受参数，要插入的节点和作为参照的节点

语法：

  1. var insertedNode = parentNode.insertBefore(newNode, referenceNode);
  3. insertedNode 被插入节点(newNode)
  4. parentNode 新插入节点的父节点
  5. newNode 用于插入的节点
  6. referenceNode newNode 将要插在这个节点之前

Document 类型

Document类型表示文档

  • nodeType 为 9
  • nodeName 为 #document
  1. <html>
  2.     <body></body>  
  3. </html>
  5. var html = document.documentElement
  6. document.childNodes[0]
  7. document.firstChild
  9. 都指向 html 元素

document对象的属性

1.title属性 显示在浏览器窗口的标题一栏或标签页上

  1. document.title = "chu"      //设置
  2. console.log(document.title) //取得

2.url 地址栏中显示的url

3.domain 页面的域名

4.referrer 保存着链接到当前页面的那个页面的url.没有来源页面的情况下，可能包含空字符串

查找元素

  • getElementById()

  • getElementsByTagName()

    • 要取得元素的标签名，返回的是包含零或多个元素的NodeList

  • getElementsByName()

    • 返回带有给定name特性的所有元素，（集合）
    • 常用情况：取得单选按钮
  1. <input type="text" name="color" id="" value="red">
  2. <input type="text" name="color" id="" value="blue">
  4. var radios = document.getElementsByName("color")

Element类型

  • nodeType 值为 1
  • nodeName 的值 为元素的标签名

访问元素的标签名(两个是一样的)

  • nodeName
  • tagName

注意：比较标签名之前注意大小写形式

  1. if(element.tagName.toLowerCase() == "div")

操作特性

这些特性的用途是给出相应元素或其内容的附加信息

  • getAttribute()

    • 传递的特性名与实际的特性名相同

  • setAttribute()

    • 接收两个参数：要设置的特性名和值
    • 如果特性已经存在，会以指定的值替换现有的值，如果不存在，则创建该属性并设置相应的值
    • name 表示名称属性的字符串
  1. <button>Hello World</button>
  3. var b = document.querySelector("button"); 
  4. b.setAttribute("name", "helloButton");
  5. b.setAttribute("disabled", "");
  • removeAttribute()
    • 这个方法不仅会清除特性的值，而且也会从元素中完全删除特性，

创建元素

  • createElement

元素的子节点

元素的 childNodes 属性中包含了它的所有子节点

Text 类型

  • nodeType 值为 3
  • nodeName 的值 #text

创建文本节点

  • document.createTextNode()

2.DOM操作技术

操作表格

  1. <script>
  2.         //创建表格
  3.         var table = document.createElement("table");
  4.         table.border = "1";
  5.         table.width = "100%";
  7.         //创建tbody
  8.         var tbody = document.createElement("tbody");
  9.         table.appendChild(tbody);
  11.         //创建第一行
  12.         tbody.insertRow(0);
  13.         tbody.rows[0].insertCell(0);
  14.         tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
  15.         tbody.rows[0].insertCell(1);
  16.         tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));
  18.         //创建第二行
  19.         tbody.insertRow(1);
  20.         tbody.rows[1].insertCell(0);
  21.         tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));
  22.         tbody.rows[1].insertCell(1);
  23.         tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));
  25.         //将表格添加到文档主体中
  26.         document.body.appendChild(table);
  27.     </script>