當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

黑马程序员pink老师前端入门教程，零基础必看的JavaScript基础语法视频教程（DOM）

發布時間：2025/3/19 javascript 17 豆豆

生活随笔收集整理的這篇文章主要介紹了黑马程序员pink老师前端入门教程，零基础必看的JavaScript基础语法视频教程（DOM）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

API

DOM

DOM簡介

什么是DOM

DOM樹

獲取元素

getElementById獲取元素

得到一個元素對象object
用dir打印，還可以得到它的屬性 div#time

getElementsByTagName獲取對象集合

H5新增獲取元素方式

獲取body和html元素

事件基礎

事件概述

常見的鼠標事件

操作元素

改變普通元素內容

改變普通元素屬性

分時問候案例

案例分析：
日期內置對象
多分支語句
img，修改src屬性
div，修改內容
操作流程：
1.獲取元素

修改表單元素屬性

京東顯示隱藏密碼明文案例

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {position: relative;width: 400px;border-bottom: 1px solid #ccc;margin: 100px auto;}.box input {width: 370px;height: 30px;border: 0;outline: none;}.box img {position: absolute;top: 2px;right: 2px;width: 24px;}</style> </head><body><div class="box"><label for=""><img src="images/close.png" alt="" id="eye"></label><input type="password" name="" id="pwd"></div><script>var flag = 0;var eye = document.getElementById('eye');var pwd = document.getElementById('pwd');eye.onclick = function () {if (flag == 0) {pwd.type = 'text';eye.src = 'images/open.png';flag = 1;}else {pwd.type = 'password';eye.src = 'images/close.png';flag = 0;}}</script> </body></html>

修改樣式屬性

淘寶關閉二維碼樣例

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {}.box img {width: 60px;margin-top: 5px;}.close-btn {position: absolute;top: -1px;left: -16px;width: 14px;height: 14px;border: 1px solid #ccc;line-height: 14px;font-family: Arial, Helvetica, sans-serif;cursor: pointer;}</style> </head><body><div class="box">淘寶二維碼<img src="images/tao.png" alt=""><i class="close-btn">x</i></div><script>var btn = document.querySelector('.close-btn');var box = document.querySelector('.box');btn.onclick = function () {box.style.display = 'none'; }</script> </body></html>

循環精靈圖背景案例

顯示隱藏文本框案例

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>input {color: #999;}</style> </head><body><input type="text" value="手機"><script>var txt = document.querySelector('input');txt.onfocus = function () {if (this.value === '手機') {this.value = '';}this.style.color = '#333';}txt.onblur = function () {if (this.value === '') {this.value = '手機';}this.style.color = '#999';}</script> </body></html>

使用className修改樣式屬性

密碼框格式提示錯誤信息案例

操作元素總結

排他思想

百度換膚案例

表格隔行變色案例

表單全選取消全選案例

獲取自定義屬性值

設置和移除自定義屬性

tab欄切換案例（自定義屬性）

H5自定義屬性

總結

以上是生活随笔為你收集整理的黑马程序员pink老师前端入门教程，零基础必看的JavaScript基础语法视频教程（DOM）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：黑马程序员pink老师前端入门教程，零基
下一篇：黑马程序员pink老师前端入门教程，零基