初识DOM

如何使用JavaScript

script元素

<script>元素

引入方式

内嵌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>元素内部

在<body>元素内部

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>元素。

初识DOM

如何使用JavaScript

script元素

引入方式

DOM是什么

DOM是什么

DOM树结构

Document对象

Document对象是什么

定位页面元素

李通

引用和评论

定时器以及定时器的几个案例

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合