JS学习笔记4-DOM

DOM:文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。

W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。

组成：

• Document：文档对象
• Element:元素对象
• Attribute：属性对象
• Text：文本对象
• Comment：注释对象
• Node：节点对象

Document：文档对象

获取：

   window.document

document 中 body属性 可以获取body标签对象:

document.body.bgColor = "red";

title 属性获取文档标题:

var bt = document.title;

获取文档最后一次修改时间:

var rq=document.lastModified;

方法：

获取Element对象

• getElementById():通过id属性值获取唯一的元素
• getElementsByTagName():通过标签名称获取元素对象数组
• getElementsByName():通过name属性值获取元素对象数组
• getElementsByClassName():通过class属性值获取元素对象数组

//根据css的选择器语法来选择的,获取的是第一个是个单数。
var aa=document.querySelector(".myclass");
alert(aa);
//根据css的选择器语法来选择的,获取的是多个
var arr=document.querySelectorAll(".myclass");
alert(arr.length);

创建其他对象

• createElement:创建元素对象
• createAttribute：创建属性对象
• createComment：创建注释对象
• createTextNode：创建文本对象

给属性对象设置值

• font1.setAttribute(‘color’,‘yellow’);
• bd.remove(); 删除自己
• bd.removeChild(div); //移除子元素
• div.removeAttribute(“align”);根据属性名来移除标签上的属性
• div.removeAttributeNode(attr);//移除属性对象。你传入的是一个属性对象
• bd.replaceChild(h4,h);//站在父元素的角度，替换子元素，值1：新的元素，值2：是要替换的旧元素。
• bd.insertBefore(h5,h1);//站在父标签的角度，在这个h1标签对象的前面插入h5这个标签对象。

Element:元素对象

innerHTML属性：获取或设置 元素的 子内容

innerTEXT属性:获取标签之间的文本内容