简单聊聊DOM

时间 2019-12-05

标签简单聊聊 dom 栏目 HTML 繁體版

原文原文链接

讨论在HTML如何去使用JavaScript

HTML页面内容：css

<!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

HTML页面内容：java

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

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

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事件以解决这个问题：app

HTML页面内容：dom

<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(子级元素):把子级元素添加到父级元素上