JavaScript之DOM

最新推荐文章于 2023-03-27 18:11:25 发布

阿斯乐Code

最新推荐文章于 2023-03-27 18:11:25 发布

阅读量357

点赞数

分类专栏： js 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_45707229/article/details/125717892

版权

DOM

Document Object Model 文档对象模型

一个页面是一个文档document，一个标签是一个元素element，一个标签、属性如href a、文本、注释等是一个节点node

getElementById

<body>
    <div id="box">2022-5-30</div>
    <script>
        var test = document.getElementById('box');		// 获得的是一个element元素对象 
        console.log(test);
        console.log(typeof test);
        console.dir(type);
    </script>
</body>

在这里插入图片描述
因为网页从上往下加载，得先有标签，所以script写在标签下面

getElementById(参数) 的参数是(大小写敏感的) 字符串 ，结果获取一个element元素对象 object

getElementsByTagName

getElementsByTagName(‘标签名’) 获取某一类标签，结果是一个伪数组存放所有这类标签以及里面的内容，可以使用length获取长度，但其他数组相关api均无效，所以叫伪数组。

界面中ul下有多个li

var lis = document.getElementsByTagName(‘li’) 获取所有li的伪数组

只要ol下面的li ：

var ol = document.getElementsByTagName(‘ol’);

var lis = ol[0].getElementsByTagName(‘li’);

getElementsByClassName(‘类名’)

getElementsByClassName 根据类名如box查找某个/些元素，返回可以是多个

quertySelector(‘选择器’)

quertySelector 可以查找类选择器也可以查找id选择器还可以查找元素选择器，参数可以是.box #nav li div等，根据不同的选择器查找到相应的元素（标签），但是返回的都是第一个元素对象

quertySelectorAll(‘选择器’)

quertySelectorAll 就可以返回所有元素对象

document.body、documentElement

var bodyEle = document.body；	//获取body标签
 console.log(bodyEle);
 var htmlEle = document.documentElement;//获取所有文档元素
 console.log(htmlEle);

在这里插入图片描述

btn.onclick = function() { xxx }

按钮点击事件

    <button id="btn">点击触发函数</button>
    var btn = document.getElementById('btn');		// 获取事件源
    btn.onclick = function() {
   						// btn.onclick 绑定事件 注册事件
        console.log('2022-5-31');					// 添加事件处理程序
    }

innerText、innerHTML

获取的元素.innerText = ‘xxx’ 修改标签里面的内容

		<div id="box">2022-5-30</div>
    		<button id="btn">日期</button>
        
        var btn = document.getElementById('btn');
        var div = document.querySelector('#box');
        btn.onclick = function() {
   
            var time = getTime();
            div.innerText = time
        }

点击 “日期” 按钮后，时间会加在后面
在这里插入图片描述

innerHTML会自动识别转换html标签，而innerText不会，只会照常显示。

当标签里嵌套标签，获取的外层标签的innerText是不包含里面的标签的，但会有里面标签的内容。

所以innerHTML 用的多

显示、隐藏密码案例

<<

最低0.47元/天解锁文章

阿斯乐Code

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之DOM

JavaScript的DOM即Document Object Model翻译为文档对象模型。一个页面是一个文档document，一个标签是一个元素element，一个标签、属性等是一个节点node。
复制链接

扫一扫