初识DOM

时间  2019-12-12
标签 dom 栏目 HTML 繁體版
原文   原文链接

如何使用JavaScript

script元素

  • <script>元素

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

引入方式

  • 内嵌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是什么

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页面中。this

  • DOM的做用

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

  • 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>orm

  • 节点是什么

节点(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>元素。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程