初识DOM

2024年5月24日 185次阅读 来源: 李通

如何使用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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞