简单聊聊DOM

最新推荐文章于 2024-11-13 15:29:17 发布

weixin_34088598

最新推荐文章于 2024-11-13 15:29:17 发布

阅读量134

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000016196560

版权

讨论在HTML如何去使用JavaScript

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

weixin_34088598

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫