JavaScript DOM基础

DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口);

DOM描绘了一个层次化的节点树,运行开发人员可以添加/移除和修改页面的某一部分;

一 DOM介绍

D(文档):可以理解为整个Web加载的网页文档;
 O(对象):可以理解为类似window对象之类的东西,可以调用属性和方法,这里说的是document对象;
 M(模型):可以理解为网页文档的树形结构;

1.节点

加载HTML页面时,Web浏览器生成一个树形结构,用来表示页面内部结构;
 DOM将这种节点结构理解为由节点组成;
 html元素为根节点;head元素是html的子节点;meta元素和title元素之间是兄弟关系;


 2.节点种类:元素节点/文本节点/属性节点
<div title="元素属性">测试Div</div>
 元素节点 => div;
 属性节点 => title="元素属性"
 文本节点 => 测试Div二 查找元素
 W3C提供了比较方便简单的定位节点的方法和属性,以便我们快速的对节点进行操作;
 DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口);

DOM描绘了一个层次化的节点树,运行开发人员可以添加/移除和修改页面的某一部分;

元素节点查找方法
    方法                               说明
getElementById()              获取特定ID元素的节点;
getElementsByTagName()        获取相同元素的节点列表;
getElementsByName()           获取相同名称的节点列表;
getAttribute()                获取特定元素节点属性的值;
setAttribute()                设置特定元素节点属性的值;
removeAttribute()             移除特定元素节点属性;

1.getElementById()

// 方法接收一个参数:获取元素的ID;
// 如果找到相应的元素则返回该元素的HTMLDivElement对象;如果不存在,则返回null;
    document.getElementById('box');              // [object HTMLDivElement];
// 当我们通过getElementById()获取到特定元素节点时,这个节点对象就被我们获取到了;
// 而通过这个节点对象,我们可以访问它的一系列属性;
(1).访问元素节点的属性
    属性                             说明
    tagName                     获取元素节点的标签名;
    innerHTML                   获取元素节点里的内容,非W3C DOM规范;
    document.getElementById('box').tagName;      // =>DIV;
    document.getElementById('box').innerHTML;    // =>测试Div;

(2).访问HTML通用属性
    属性                             说明
    id                           元素节点的id名称;
    title                        元素节点的title属性值;
    style                        CSS内联样式属性值;
    className                    CSS元素的类;

document.getElementById('box').id;           // =>id;
    document.getElementById('box').title;        // 获取title;

document.getElementById('box').style;        // 获取CSSStyleDeclaration对象;
    document.getElementById('box').style.color;  // 获取style对象中的color的值;也就是设置在元素行内的样式值;
    document.getElementById('box').style.color='red';    // 设置style对象中的color的值;

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgjfff.html