基础1了解DOM树模型相关理论知识

209、DOM209、DOM一.DOMJavaScript是让静态HTML文档“动起来”的程序语言其一，让页面中的元素能够实现动态、动其二，能够响应用户的操作、响应DOM目的在于，能够将整个HTML文档的层级嵌套关系映射成JavaScript代码结构，以此浏览器中的每个窗口都对应一个JavaScriptWindowWindow对象都包含一个属性，其对应整个HTML文档，表示整个窗口下网页的内容。这个用JavaScript代码中的对象（Object）所表示的HTML文档结构，就是DOM，全称为 ObjectModel）”，其结构表现的像一颗树，所以我们也称其为DOM二.文档对象模型文档对象模型（DOM）包含所有HTML元素，以及所有文本字符串，甚至包含HTML注<html<title>DOM文档树<h1id="hh">文档标题<p文档内容甚至“回车符、HTML注释”同样也是节点。其一，包含所有、文本、注释的类型，用“节点类型（Node）”表示其二，只包含的类型，用“元素类型（Element）”表示和Element是两个对象，但是HTML DOMDOMElement每个 是一个元素节HTMLHTML三.ID[Element ementById([string]elementId[NodeList ementsByName([string]elementName[NodeList ementsByTagName([string]tagname通过CSS[NodeList ementsByClassName([string]className通过CSS[Element .querySelector([string]selector[NodeList .querySelectorAll([string]selector四.文档树（DOM） 对象、Element对象、文Text对象，以及注释都是Node对象，Node一些重要的属性，可以用来和遍历节点树 节点元素的名，返回结果为全大写字母 没有父节点包括元素节点和文本节点,回车、空格属于空文本节点（IE8及以下会忽略文本节点）具有同一个父节点、相邻的节点中的前一个和后一个节点。（IE8及以下会忽略文本节点若要使用若要使用Node来遍历节点，必须 firstChildlastChildElement类型，忽略文本、注释、空白节点（IE8及以下返回undefined）varli= ementChild|| （IE8及以下返回varli= ementChild||得到当前元素的所有子元素集合，返回HTMLCollection，类似于NodeList（能兼容子元素的数量。（IE78下返回ElementElement同样 parentNode属性，但返回的结果都是Element类型五.修改元素属性和内容HTML元素由名和属性（名/值对）组成vara ementById("link"varhref=console.log(href,a.id=="link"注意：这种方式有局限性，因为经常会碰到属性名和注意：这种方式有局限性，因为经常会碰到属性名和JavaScript中的保留关键 vara ementById("link"varhrefa.getAttribute("hrefa.hrefvarid=a.setAttribute("id","new-link"console.log(href,a.id=="link"vara= ementById("link");console.log(a.hasAttribute("class"));a.removeAttribute("class");console.log(a.getAttribute("class"));修改元素的HTML内容（包含所有内容，包括HTML等HTMLElement.outerHTML元素本身也会被替换修改元素的文本内容（去除所有HTML后的文本内容六.创建、插入和删除元素创建元素[Element .createElement([string]tagName[Text .prototype.createTextNode([string]datavarh2= h2.innerText="新增的标题";div2.insertBefore(h2div2.firstChild);删除当前节点（但是IE不支持 ceChild(newNode,七.设置和获取选中状态element.checked3、做