学习JS第四天

简介: 学习JS第四天

跟着黑马视频学JS第四天


DOM


获取元素



1、document.getElementById('id')//获取带ID的元素对象 返回值是一个element对象
2、document.getElementsByTagName('标签名')//获取标签对象 返回的是元素对象的集合 以伪数组的形式存储
如果页面中没有这个元素 会返回一个空的伪数组
获取父元素内部是指定标签名的子元素时,element.getElementsByTagName('标签名');
父元素必须是单个对象
例:var ol = document.getElementsByTagName('ol');
    console.log(ol[0].getElementsByTagName('li'));//注意是ol[0]而不是ol 因为这里ol是一个伪数组
    也可以通过ID选择器直接选取:
    var ol = document.getElementById('ol');
     console.log(ol.getElementsByTagName('li'));//这里的ol是单个对象
3、document.getElementsByClassName('类名')//H5新增 返回对象集合
4、document.querySelector('选择器')//H5新增 根据指定选择器返回第一个元素对象 选择器需要加符号 .class #id
5、document.querySelectorAll('选择器')//H5新增 返回指定选择器的所有元素对象集合
6、获取body元素:document.body;
7、获取html元素:document.documentElement;
8、element.getAttribute('属性');//主要用于获取自定义属性
9、element.setAttribute('属性','值');//修改自定义属性
10、element.removeAttribute('属性');//移除自定义属性
11、H5规定自定义属性以data-开头作为属性名并赋值


事件


事件三要素:事件源、事件类型、事件处理程序
改变元素内容:
    element.innerText//不识别HTML标签 不用
    element.inneerHTML//识别HTML标签 保留空格和换行
样式属性操作:element.style:fontSize //驼峰命名法 行内样式表
element.className//类名样式操作 适用于样式修改较多 会覆盖原先的类名


显示/隐藏密码案例


1687263999018.png


排他思想


1687263990863.png


视频很多案例 看了一遍 不一一记录了


相关文章
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的英语学习交流平台小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的英语学习交流平台小程序附带文章源码部署视频讲解等
5 0
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的学习资源推送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的学习资源推送系统附带文章源码部署视频讲解等
5 0
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的可视化的学习系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的可视化的学习系统附带文章源码部署视频讲解等
6 0
|
4天前
|
存储 前端开发 JavaScript
|
4天前
|
消息中间件 前端开发 JavaScript
|
4天前
|
JSON JavaScript 前端开发
|
4天前
|
JavaScript 前端开发
|
4天前
|
JavaScript 前端开发
|
4天前
|
JavaScript 前端开发 Java
|
4天前
|
移动开发 前端开发 JavaScript