JavaScript Document对象DOM

Document对象 DOM

描述

• 每个载入浏览器的HTML文档都会成为Document对象
• Document对象使我们可以从脚本中对HTML页面中的所有元素进行访问
• Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
• 当浏览器打开一个HTML文档时，浏览器解析HTML文档的标签，并创建表示这些标签的对象，这些对象就是HTML文档对象
• 文档对象即Document对象，指的是一回事

---

HTML DOM 模型被构造为对象的树

---

JavaScript DOM知识脑图

---

DOM对象属性

属性	说明
document.title	设置文档标题等价于HTML的
document.bgColor	设置页面背景色
document.linkColor	未点击过的链接颜色
document.alinkColor	激活链接(焦点在此链接上)的颜色
document.fgColor	设置前景色(文本颜色)
document.vlinkColor	已点击过的链接颜色
document.URL	设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate	文件建立日期，只读属性
document.fileModifiedDate	文件修改日期，只读属性
document.fileSize	文件大小，只读属性
document.cookie	设置和读出cookie
document.charset	设置字符集 简体中文:gb2312

---

DOM对象方法

• document.write()：向文档写HTML表达式或JavaScript代码；注：文档加载之后使用document.write()会覆盖原文档
• document.getElementById()：返回对拥有指定 id 对象的引用
• document.getElementsByName()：返回带有指定名称的对象集合
• document.getElementByTagName()：返回带有指定标签名的对象集合
• document.createElement()：创建元素节点；要与appendChild() 或 insertBefore()方法联合使用
  a、element.appendChild()：向元素添加新的子节点，作为最后一个子节点
  b、element.removeChild(id)：从元素中移除子节点

---

获取或设置元素属性

• 元素对象.属性名 = “属性值”;：获取或设置元素属性
• element.innerHTML：设置或返回元素的内容，可以包含HTML标签
• element.innerText：设置或返回元素的内容
• element.tagName：返回元素的标签名
• element.id：设置或返回元素的id
• element.className：设置或返回元素的class属性
• element.title：设置或返回元素的title属性
• element.value：设置或返回元素的value属性
• 。。。

---

通用方法获取或设置元素属性

• 元素对象.getAttribute(“属性名”)：获取元素指定的属性
• 元素对象.setAttribute(“属性名”, “属性值”)：设置元素指定属性的值
• 元素对象.removeAttribute()：移除元素指定的属性

    <input type="text" id="zxw" class="ZZ" value="设置元素属性" abc="111">
    <script>
        var z = document.getElementById("zxw");
        // 获取任意属性
        alert(z.getAttribute("abc"));
        alert(z.getAttribute("class"));
        alert(z.getAttribute("value"));

        // 设置元素属性
        z.setAttribute("type", "button");
        z.setAttribute("value", "按钮");

        // 添加元素属性
        z.setAttribute("title", "新添加的属性");

		// 移除元素属性
        z.onclick = function(){
            z.removeAttribute("value");
        }
    </script>

---

获取或设置元素行内样式

元素对象.style.属性名 = “属性值”：获取或设置元素行内样式

    <div id="z" style="color: red; font-size: 24px;">获取和设置元素行内样式</div>
    <script>
        var z = document.getElementById("z");
        //方式一：获取元素行内样式
        // alert(z.style.cssText);
        // 方式一：设置元素行内样式,会对行内样式重置
        // z.style.cssText = "color:blue; font-size:50px;"

        // 方式二：获取元素行内某个样式
        alert(z.style.color);
        // 方式二：设置元素行内某个样式
        // 当行内样式中的属性名有"-"的，应使用驼峰命名法
        z.style.color = "blue";
        z.style.fontSize = "50px";
    </script>

---

DOM 节点

将文档结构想象成一棵树，每一部分（元素，属性，内容）都可以看做一个节点
根据一个节点可以通过关系找到其他节点

---

节点的属性：名称、类型、值

• element.nodeName：返回元素的名称。与element.tagName作用相同。
  1、#text：文本节点的名称
  2、#document：文档节点的名称

• element.nodeType：返回元素的节点类型
  1、如果节点是元素节点，则nodeType属性将返回1
  2、如果节点是属性节点，则nodeType属性将返回2
  3、如果节点是文本节点，则nodeType属性将返回3

• element.nodeValue：设置或返回元素值
  1、文本节点的nodeValue为文本内容
  2、属性节点的nodeValue为属性值
  3、元素节点无nodeValue

---

子元素相关（可以类别CSS中的虚拟类别选择器）

• element.parentNode：返回元素的父节点（仅节点，不是名称）
• element.childNodes：返回元素子节点（文本和空格也算节点）的NodeList。类似CSS中的子选择器
• element.children：返回元素的子元素，该属性只返回元素的节点(不包含空格)
• element.firstChld和element.firstElementChild(不包含空格)：返回元素的首个子元素。类似CSS中的e：first-child
• element.lastChild和element.lastElementChild(不包含空格)：返回元素的最后一个子元素。类似CSS中的e：last-child

---

同级兄弟元素相关（可以类别CSS中的兄弟选择器）

• element.previousSibling、element.previousElementSibling：返回位于相同节点树层级的前一个元素
• element.nextSibling、element.nextElementSibling：返回位于相同节点树层级的下一个节点。类似CSS中的直接相邻选择器：h1+h2

---

属性节点

• element.attributes：返回元素属性的NameNodeMap
• element.insertBefore(要插入的子节点，插入位置)：在指定的已有的子节点之前插入新节点
• element.replaceChild(要替换的子节点，替换位置)：替换元素中的子节点