JS DOM基础

DOM(即 Document Object Mode) 是 W3C（万维网联盟）的标准。

DOM 定义了访问 HTML 和 XML 文档的标准：“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

1 DOM的查找方法

<1> 

document.getElementById("id名称")

返回对有有指定“id”的第一个对象的引用，返回自为DOM对象。

"id"输入错误时，会返回null，同时出现两个相同的"id",系统只能返回与第一个"id"相对应的对象。

<2>

document.getElementByTagName("tag标签")

返回对所有tag标签引用的集合，返回值：数组

例如：

<ul id="list">
  <li>abc.</li>
  <li>123.</li>
  <li>ABC.</li>
</ul>

先获取到指定“id”，再获取其中包含的标签

document.getElementById("list").document.getElementByTagName("li");

我们得到就是<ul>中所有<li>的集合

2.元素的获取 

ele.style.styleName=styleValue;

ele: 指定的DOM对象

styleName:样式的名称，使用驼峰法命名

我们需要先取出DOM对象，再对其进行样式的设置

3.innerHTML  

ele.innerHTML;

返回ele 元素开始与结束标签之间的html,获取和设置标签之间的文本和html内容

ele.innnerHTML+"要添加的内容"；  给其后添加文字，内容

ele.innerHTML="html";           设置ele元素开始和结束标签之间的内容为我们给定的"html"

4.className

ele.className;  返回ele元素的css属性   若有两个以上的class属性值，在获取时，会将所有的都获取到


ele.className="类名";   设置ele元素的class属性为我们设置的“类名”，以此来替换本身的class属性，  

5. 获取/添加DOM属性

ele.getAttribute("attribute")    获取指定元素的attribute属性

attribute:要获取的html属性

我们自定义一个data-type属性，只能使用p.getAttribute("data-type");

但是我们也有系统自带的属性值，如id,style,可以直接使用p.id,  class比较特殊，要写成p.className

6. 设置属性

ele.getAttribute("attribute",value);

为特定元素设置属性，value可能为字符串，要加引号，改方法的使用存在浏览器的兼容问题。