初识DOM

2023年10月22日 208次阅读 来源: 李通

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