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);
  2. insertedNode 被插入节点(newNode)
  3. parentNode 新插入节点的父节点
  4. newNode 用于插入的节点
  5. referenceNode newNode 将要插在这个节点之前

Document 类型

Document类型表示文档

  • nodeType 为 9
  • nodeName 为 #document
  1. <html>
  2. <body></body>
  3. </html>
  4. var html = document.documentElement
  5. document.childNodes[0]
  6. document.firstChild
  7. 都指向 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">
  3. 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>
  2. var b = document.querySelector("button");
  3. b.setAttribute("name", "helloButton");
  4. 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%";
  6. //创建tbody
  7. var tbody = document.createElement("tbody");
  8. table.appendChild(tbody);
  9. //创建第一行
  10. tbody.insertRow(0);
  11. tbody.rows[0].insertCell(0);
  12. tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
  13. tbody.rows[0].insertCell(1);
  14. tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));
  15. //创建第二行
  16. tbody.insertRow(1);
  17. tbody.rows[1].insertCell(0);
  18. tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));
  19. tbody.rows[1].insertCell(1);
  20. tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));
  21. //将表格添加到文档主体中
  22. document.body.appendChild(table);
  23. </script>