二、DOM

作者: 天降小明明 | 来源:发表于2017-06-16 10:02 被阅读24次

1、DOM:Document Object Model.
document:网页加载到浏览器中时,DOM将网页文档转化为一个文档对象。
Object:JavaScript的对象分为三种类型:
用户自定义对象(一般不讨论这种对象)
内建对象(非常重要)
宿主对象(通常称为BOM:浏览器对象模型,不必太纠结BOM)
Model:模型,或者称为Map(地图)
把文档的各个元素当做节点,将文档构成一个“节点数”

2、节点
元素节点:构成了文档模型的框架
文档节点:文档的内容
属性节点:决定了文档的表现形式
元素节点包含了属性节点和文档节点

3、获取元素
getElementById()
写法:document.getElementById(id) 只有一个参数,返回的结果是一个元素节点对应的对象
getElementsByTagName( )
写法:document.getElementsByTagName(tag) 只有一个参数,返回的结果是一个数组这个数组包含的是名为tag的元素节点的对象
getElementsByClassName( )
写法:document.getElementsByClassName(class) 只有一个参数,返回的结果是一个数组,这个数组包含的是同一个class名的元素节点的对象
Tips:1.typeof操作符:可以告诉我们他的操作数的类型。exp:
typeof document.getElementById(id); 返回的结果是Object,说明它的操作数是一个对象
2.通配符“*”:获取元素的后两个方法允许把通配符作为它的参数,这意味着,对应的每个元素都将被返回在数组里。

4、获取和设置属性
getAttribute:使用方式:object.getAttribute(attribute);这样就可以获取到这个对象的属性值
判断某个对象的属性值是否为空的方法,exp:
var paras = document.getElementsByTagName("p");
for(var i=0;i<paras.length;i++){
var title_text=paras[i].getAttribute("title");
if(title_text!=null) alert(title_text);
}
在检查某项数据是否为null时,if语句可以更简便:if(title_text) … if(something)与if(something!=null)完全等价

setAttribute:使用方式:object.setAttribute(attribute,value);它允许我们对属性节点的值做出修改。

Tips:DOM的工作模式:
先加载文档的静态内容,再动态刷新,动态刷新时不影响文档的静态内容。这正是DOM的真正威力:对页面内容进行刷新却不需要在浏览器里刷新页面。

相关文章

  • react基础入门:(二)原生JS操作DOM元素

    原文链接:react基础入门:(二)原生JS操作DOM元素 一 初始化项目 二 操作 DOM 获取 dom 元素 ...

  • DOM(二)

    DOM (一) 什么是DOM(Document Object Model):专门操作网页内容的APIHTML:专门...

  • DOM(二)

    DOM扩展 选择符API 在DOM(一) 中说到的方法属性nodeList 是动态的,性能存在很大的隐患 quer...

  • 二、DOM

    1、DOM:Document Object Model.document:网页加载到浏览器中时,DOM将网页文档转...

  • DOM (二)

    第八天 03-对象模型-第02天{表单属性、属性操作} 第八天表单属性大量拼接字符串仿京东搜索框排他思想全选反选自...

  • DOM :DOM0 DOM1 DOM2 DOM3

    一、DOM全称文档对象模型(Document Object Model) 二、DOM是什么DOM就是一个编程接口,...

  • Vue的虚拟dom

    一,vdom(virtual dom) 用js模拟dom结构,计算出最小的变更,操作dom 二,diff算法概...

  • 第十九节: JavsScript对象类型检测,克隆与JS异步加载

    一、克隆对象 浅浅拷贝 浅拷贝 深拷贝 二、检测类型 三、 DOM树解析 什么是DOM树 ==>DOM...

  • 06-BOM+DOM+事件

    一.BOM 1.BOM介绍 2.BOM中的对象和方法 二.DOM 1.DOM的概念 2.DOM节点分类 3.DOM...

  • 49.xml解析方式

    一.DOM(JAXP Crimson解析器) 二.SAX 三.JDOM 四.DOM4J 区别: 一.DOM4J性能...

网友评论

      本文标题:二、DOM

      本文链接:https://www.haomeiwen.com/subject/jzppqxtx.html