简朴聊聊DOM

2023年3月11日 154次阅读 来源: 庄国琳

议论在HTML怎样去运用JavaScript

<script>元素用于在HTML页面中嵌入或引入JavaScript剧本代码，该元素默许被定义在<head>元素中

HTML页面内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--type：该属性定义划定的文本范例，可认为css范例也可认为JavaScript范例等其他范例
         language：和type属性相似，这个属性定义剧本运用的言语，该属性不是标准规范
        src：定义援用外部剧本的URI
    -->
    <script type='text/javascript' src='01.js'></script>
</body>
</html>

内嵌javascript代码：与内嵌样式表的用法一样，就是将javascript代码经由过程<script>元素直接编写在HTML页面的内部，然则这类体式格局致使HTML页面与javascript代码不星散，不引荐运用

HTML页面内容：

<button>这是一个按钮</button>
<script>
    var btn=document.getElementsByTagName('button');
    console.log(btn);
</script>

外联JavaScript文件：相似于外联样式表的用法，将JavaScript代码编写在自力的JavaScript文件中，再经由过程HTML页面的<script>元素将其JavaScript文件引入

HTML页面内容：

<script src='js/index.js'></script>

JavaScript文件内容：

var username=document.getElementById('username');
console.log(username);

在<head>元素内部:<script>元素默许是被定义在<head>元素的内部，然则，这类体式格局致使浏览器加载HTML页面时先加载JavaScript代码再加载HTML元素，假如JavaScript代码中包括猎取或更新HTML元素的逻辑，会致使操纵失利
经由过程增加window.onload事宜以处理这个题目：

HTML页面内容：

<head>
    <script>
        window.onload=function(){
            var username=document.getElementById('username');
            console.log(username);
        }
    </script>
</head>
<body>
    <input type='text' id='username' value='请输入你的用户名'>
</body>

在<body>元素内部：<script>元素也能够被定义在<body>元素中，但为了保证浏览器窗口先加载HTML元素再加载JavaScript代码逻辑，平常<script>元素定义在<body>元素中的末了

HTML页面内容：

<button>这是一个按钮</button>
<script>
    var btn=document.getElementsByTagName('button');
    console.log(btn);
</script>

DOM

D:document,就是dom将html页面剖析为一个文档，同时供应了document对象
O:object，就是dom将html页面中每一个元素剖析为一个对象
M:model，就是dom中示意各个对象之间的关联

  • Dom的作用

Dom被设想用于剖析HTML页面文档，轻易JavaScript言语经由过程dom接见和操纵HTML页面中的内容
Dom是由w3c构造定义标准规范，而且由各大浏览器厂商支撑，严厉意义上来讲，dom并不是属于JavaScript言语
之所以能够在JavaScript言语中运用dom，是因为各大浏览器将dom的标准规范内容封装成了JavaScript言语所支撑的情势
对dom中的对象，我们只要挪用的权限，没有修正的权限，也说清楚明了这个题目
浏览器加载并运转html页面后，会建立dom构造。因为dom中的内容被封成了JavaScript言语中的对象，所以我们能够运用JavaScript言语经由过程dom构造来接见和操纵html页面中的内容

  • 节点

节点底本是收集术语，示意收集中的连接点，一个收集是由一些节点组成的鸠合，在dom树构造中，节点也是很重要的一个观点，简朴来讲，节点作为dom树构造中的连接点，终究组成了完全的dom树构造
经由过程节点观点，能够将底本的dom树构造改成dom节点树构造举行示意
dom中的m示意model，也能够用来示意dom节点树构造中节点之间的关联
在dom节点树构造中，重要具有以下三层关联：
父级与子级关联
先人与子女关联
兄弟关联

Document对象

  • getElementById()要领：猎取元素的id属性,返回单个
  • getElementsByName()要领：猎取元素的name属性，返回一个鸠合
  • getElementsByTagName()要领：猎取html元素，返回一个鸠合
  • getElmeentsByClassName()要领：猎取元素的calss属性，返回一个鸠合
  • querySelector()要领：能够经由过程选择器猎取页面元素，返回单个
  • querySelectorAll()要领：能够经由过程选择器猎取页面元素，返回一个鸠合

动态鸠合(HTMLCollection):依据HTML元素变化而变化，该鸠合的length属性值是变化的
静态鸠合(NodeList):不会依据HTML元素变化而变化，假如实行删除操纵，该鸠合能够存在已不存在的元素，然则不会影响length属性值的变化

  • createElement(‘元素名’):建立元素节点
  • createTextNode(‘文本内容’):建立文本节点
  • createAttribute(‘属性称号’):建立属性节点
  • 属性称号.nodeValue=’属性值’:建立属性节点的属性值
  • 父级元素.appendChild(子级元素):把子级元素增加到父级元素上
    原文作者：庄国琳
    原文地址: https://segmentfault.com/a/1190000016196560
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞