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可能为字符串,要加引号,改方法的使用存在浏览器的兼容问题。