初识DOM

如何使用JavaScript

script元素

  • <script>元素

<script>元素用于在HTML页面中嵌入或引入JavaScript脚本代码。该元素默认被定义在<head>元素中。
type:该属性定义script元素包含或src引用的脚本语言,属性的值为MIME类型。
language:和type属性类似,这个属性定义脚本使用的语言。该属性不是标准规范。
src : 定义引用外部脚本的URI,这可以用来代替直接在文档中嵌入脚本。

引入方式

  • 内嵌JavaScript代码

内嵌JavaScript代码
所谓内嵌JavaScript代码,与内嵌样式表的用法相似,就是将JavaScript代码通过<script>元素直接编写在HTML页面的内部。
注意:这种方式导致HTML页面与JavaScript代码不分离,不推荐使用。
<form> id = ‘myform’ action=’#’
<input type = ‘text’ id =’username’value=’请输入你的用户名’>
</form>
<script>
var username =document.getElementById(‘username’);
console.log(username);
</script>

  • 外联JavaScript文件所有外联JavaScript文件,类似于外联样式表的用法,将JavaScript代码编写在独立的JavaScript文件中,再通过HTML页面的<script>元素将其JavaScript文件引入。

JavaScript文件内容:
var username =document.getElementById(‘username’);
coonsole.log(username);
HTML页面内容:
<script>src =’js/index/js’></script>
##引入位置

  • 在<head>元素内部

<script>元素默认式被定义在<head>元素的内部。但是,这种方式导致浏览器窗口加载HTML页面时先加载JavaScript代码再加载HTML
元素。如果JavaScript代码中包含获取或更新HTML元素的逻辑,会导致操作失败。
通过添加window.onload事件以解决这个问题:
<head>
<script>
window.onload =function(){
var username = document.getElementById(‘username’);
console.log(username);
}
</script>
</haead>
<body>
<input type = ‘text’ id=’username’ value=’请输入你的用户名’>
</body>

  • 在<body>元素内部

<script>元素也可以被定义在<body>元素中。但为了保证浏览器窗口先加载HTML元素再加载JavaScript代码逻辑,一般将<script>元素定义再<body>元素的最后。
<form id =’myform’ action=’#’>
<input type =’text’ id =’username’ value =’请输入你的用户名’>
</form>
<script>
var userrname =document.getElementById(‘username’);
console.log(username);
</script>

DOM是什么

DOM是什么

  • dom是什么

DOM是个缩写,全称是Document Object Model,被译为文档对象模型。
D标识Document,就是DOM将HTML页面解析为一个文档。同时提供了document对象。
O标识Objcet,就是DOM将HTML页面中每一个元素解析为一个对象。
M 标识Model,就是Dom中表示各个对象之间的关系。

  • DOM的标准

由于DOM的标准规范是由W3C组织起草并定义的,所以W3C对DOM的定义是目前最权威的解释。
DIN是一个独立于任何语言和平台的接口,允许任何语言或脚本动态地访问和更新HTML文档的内容,结构和样式。该HTML页面可以仅一部处理,并且该处理的结果可以被合并到所呈现的html页面中。

  • DOM的作用

DOM被设计用于解析HTML页面文档,方便JavaScript语言通过DOM访问和操作HTML页面中的内容。
DOM是由W3C组织定义标准规范,并且由各大浏览器厂商支持。严格意义上来将,DOM并非术语JavaScript语言。
我们之所以可以在JavaScript语言中使用DOM,是因为各大浏览器将DOM的标准规范内容封装成了JavaScript语言所支持的形式。
对DOM中的对象,我们只有调用的权限,没有修改的权限,也说明了这个问题。

  • DOM的作用

浏览器加载并运行HTML页面后,会创建DOM结构。由于DOM中的内容被封装成了JavaScript语言中的对象,所以我们可以使用
JavaScript语言通过DOM结构来访问和操作HTML页面中的内容。

DOM树结构

  • DOM树结构

DOM可以访问和更新HTML页面中的内容,结构和样式,是因为DON将HTML页面解析为一个树结构。
<!DOCTYPE html>
<html lang =’en’>
<head>
<meta charset=’UTF-8′>
<title>示例页面</title>
</head>
<body>
<h2>这是一个示例页面</h2>
<p id =’p’ title = ‘this is p.’>这是一个段落内容.</p>
</body>
</html>

  • 节点是什么

节点(Node)原本是网络术语,表示网络中的连接点。一个网络是由一些节点构成的集合。
在DOM树状结构中,节点也是很中烟的一个概念。简单的说,节点作为DOM树结构中的连接点,最终构成了完整的DOM树结构。

  • 节点之间的关系

DOM中的M表示Model(模型),也可以用来表示DOM节点树结构中节点之间的关系;在DOM节点树结构,主要由以下三层关系:
父级于子级:如果将HTML页面中摸一个元素作为父级的话,那包含在该元素内的第一层所有元素都可以称之为该元素的子级。
祖先与后代:如果将HTML页面中的摸一个元素作为父级的话,那包含在该元素内的所有元素(除了子级元素之外)都可以称之为该元素的后代。
兄弟关系:具有相同父级元素的两个或几个元素之间的兄弟关系。
DOM访问和更新HTML页面中的内容,主要依靠DOM节点树结构中的以上三种节点关系完成。

Document对象

Document对象是什么

  • Document对象是什么

Document对象是DOM 的标准规范中比较中还要的对象之一。该对象提供了访问和更新HTML页面内容的属性和方法。
Document对象作为DOM访问和更新HTML页面内容的入口。简单来说,可以把Documtnt对象理解为在DOM的变成规范中代表HTML页面。
Document对象提供了属性和方法,可以实现定位HTML页面中的元素,或者创建新的元素等功能。

  • 继承链关系

Document对象是继承于Node对象的。Node对象也是DOM的便准规范中非常重要的对象之一,而Node对象又是继承于EventTarget对象。
console.log(Document.prototype.instanceof Node);
console.log(Node.prototype instanceof EventTarget);
console.log(Document.prototype instanceof EventTarget);
Documen对象的属性和方法多是继承于Ndoe对象和EventTarget对象的。当然,也有一部分属性和方法是实现了HTMLDocument接口的。

定位页面元素

  • 定位元素方法方法

Document对象提供了属性和方法实现了定位页面元素功能,这也是
DOM的便准规范中的DOcument对象的主要应用之一。
Document对象提供实现定位页面元素的方法具有如下几种:
getElementByld()方法:通过页面元素的id属性值定位元素。
getElementsByName()方法:通过页面元素的name属性值定位元素
getElmentsByTarName()方法:通过页面元素的元素定位元素。
getElementsByClassName()方法:通过页面元素的class属性值定位元素。
querySelector()方法:通过CSS选择器定位第一个匹配的元素。
querySelectorAll()方法:通过CSS选择器定位所有匹配的元素

  • ID属性值定位元素

HTML页面元素的id属性是特点是唯一,不可重复的,所有通过这种方式定位的HTML页面元素是也是唯一的。
var elemnt= document.getElementById(id);
注意:如果HTML页面中不存在具有该id属性值的元素,则返回null。
var btn = document.getElementById(‘btn’);
//获取定位元素的class属性值
var vlassname=btn.className;
//添加animate动画样式
classNmane+=’antmate’;
//将新的class属性值设置
btn.className =className;

  • name属性值定位元素

其语法格式如下:
var elements =document.getElementsByName(name);
name是参数,表示索要定位元素的name属性值,是一个大小写敏感的字符串。
elements是返回值,表示定位元素的集合,是一个NodeList集合。
var elems = document.getElementsByName(‘btn’);
//循环遍历所有元素
for (var i=0;i<elems.length;i++){
var elem =elems[i];
var className =elem.className;
classNmae+=’animate’;
elem.className=className;}

  • 元素名定位元素

其语法格式如下:
var elements =document.getElementsByTagName(name);
name是参数,表示所要定位元素的元素名,符号’*’所表示所有元素。
elements是返回值,表示定位元素的集合,是一个NodeList集合。
var elems =document.getEkementsByTarName(’button);
//循环遍历所有元素
for (var i=0; i<elems.length;i++){
var elem =elems[i];
car className+=’animate’;
elem.className=className;}

  • class属性值定位元素

其语法格式如下:
var elements =document.getElementsByClassName(name);
name是参数,表示索要定位元素的name属性值,是一个大小写敏感的字符串。
elements是返回值,表示定位元素的集合,是一个NodeList集合。
var elems = document.getElementsByClassName(‘btn’);
//循环遍历所有元素
for (var i=0;i<elems.length;i++){
var elem =elems[i];
var className =elem.className;
classNmae+=’animate’;
elem.className=className;}

  • CSS选择器定位元素

CSS中的选择器可以很便利地定位HTML页面元素,DOM地标准规范中也提供类似地方法。
querySelector()方法:通过CSS选择器定位第一个匹配地元素。
var elements =document.querySelector(selectors
);
selectors是参数,表示选择器,可以包含一个或多个CSS选择器,多个则以逗号分隔。
element是返回值,表示定位元素地集合,匹配地第一个元素。、
var btn = document.querySelector(#btn);
//获取定位元素地class属性值
var className=btn.className;
//添加animate动画样式
className+=’animate’;
//将新的class属性值设置
btn.className=calssName;

querySelectorAll()方法:
通过CSS选择器定位所有匹配地元素
var elements =document.querySelector(selectors
);
selectors是参数,表示选择器,可以包含一个或多个CSS选择器,多个则以逗号分隔。
element是返回值,表示定位元素地集合,是一个NodeList集合。
var btn = document.querySelectorALL(‘button’);
//获取定位元素地class属性值
var className=btn.className;
//添加animate动画样式
className+=’animate’;
//将新的class属性值设置
btn.className=calssName;

  • 节点集合NodeList

NodeList是一组元素节点地集合,每一个节点具有相应地索引值(从开始地数字,类似于数组)。
NodeList集合分为两种:
动态NodeList
所谓动态地NodeList集合,就是如果文档中地节点树发生变化,则已经存在地NodeList对象也可以能会变化。
getElementsByName()方法:通过页面元素地name属性值定位元素。
getElementsByTagName()方法:通过页面元素地元素名定位元素。
getElemengtsByClassName()方法:通过页面元素地class属性值定位元素。
静态NodeList
所谓静态NdeList集合,就是对文档对象模型地任何改动都不会影响集合地内容。
定位页面元素属性
Document对象也提供了一些属性,来定位HTML页面中地一些比较特殊地元素
documentElemengt:获取HTML页面中地<html>元素。
head:获取HTML页面中地<head元素>
title:或者HTML页面中地<title>元素。
links:获取HTML页面中地所有元素。
body:获取HTML页面中的<body>元素。
images:获取HTML页面中地所有<img>元素。

    原文作者:李通
    原文地址: https://segmentfault.com/a/1190000016169407
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞