亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索

微信公眾號

首頁文章專題 AI工具學習編程手冊下載最近更新

文章 web3.0 后端開發(fā) web前端數據庫開發(fā)工具 php框架常見問題科技 Java 系統(tǒng)教程電腦教程硬件教程手機教程軟件教程游戲教程自媒體新聞

專題后端開發(fā) web前端數據庫開發(fā)工具 php框架科技 Java 系統(tǒng)教程電腦教程硬件教程手機教程軟件教程游戲教程新聞

AI工具 AI 聊天問答 Agent智能體 AI 文本寫作 AI 繪畫作圖 AI 設計工具 AI 視頻創(chuàng)作 AI 音頻制作 AI 辦公學習 AI 編程開發(fā) Prompt指令

學習大前端后端開發(fā) 數據庫移動端運維開發(fā) UI設計計算機基礎

編程手冊大前端 JavaScript 后端開發(fā) 數據庫移動端運維開發(fā) UI設計計算機基礎 XML Web Services

下載 js特效網站源碼工具下載類庫下載網站素材學習資源插件擴展手機/移動開發(fā) 手機游戲

html 頁面的基本文檔結構

<!DOCTYPE html>
<!--聲明文檔類型-->
<html>
  <!---整個網頁的根標簽-->
  <head>
    <!--頭標簽，內容通常不在瀏覽器顯示-->
    <meta charset="UTF-8" />
    <!--設置字符編碼為UTF-8-->
    <title>Document</title>
    <!--網頁的title-->
  </head>
  <!--頭標簽的閉合-->
  <body>
    <!--主體標簽-->
    <!--內容在瀏覽器顯示-->
  </body>
  <!--主體標簽的閉合-->
</html>
<!--根標簽的閉合-->

以文檔結構抽象出的文檔對象模型（DOM）

console.log(); 將代碼發(fā)送到控制臺

查找標簽

document.getElementById()
- 通過id屬性獲取
document.getElementsByTagName()
- 通過標簽名獲取
document.getElementsByClassName()
- 通過類名獲取
document.getElementsByName()
- 通過name屬性獲取
document.querySelector()/document.querySelectorAll()
- 通過css選擇器獲取元素

其他信息【返回數組類型可以用下標方式定位】

document.URL
- 當前頁面的URL
document.documentElement
- html文檔
document.head
- 頭元素
document.charset
- 編碼
document.title
- title
document.body
- 主體body
document.styleSheets
- 樣式表
document.scripts
- js 腳本
document.currentScript
- 當前運行的js腳本

更改屬性值的方案
document.title = "String";

html 元素的三大通用屬性及優(yōu)先級

屬性	用途
id	由用戶保證它在當前頁面的唯一性，瀏覽器不檢查，應該專用于獲取唯一元素
class	類屬性，返回多個具有共同特征的元素集合，一個標簽可以屬于多個類。
style	設置當前元素對象的樣式(行內樣式)

id 和class常用于在css/js中對元素進行選擇

行內樣式舉例：

<p ”style="color:red; font-size:20px;">內聯樣式</p>
<!--設置p標簽內的字體顏色為紅色，大小為20個像素-->

要了解id、class、style之間的優(yōu)先級，需要帶入到樣式表中

style作為標簽使用時:內聯樣式

<html>
    <head>
        <meta charset=UTF-8 />
        <title>Document</title>
        <style> /*內聯樣式*/
            p{      /*標簽選擇器*/
                 background-color: yellow;
             }
            .class_nature{      /*類選擇器*/
                background-color: blue;
            }
            #id-nature{     /*id選擇器*/
                background-color:red;
            }
        </style>
    </head>
    <body>
        <p id=“id_nature” class="class_nature" style="background-color: pink"> 元素的三大通用屬性</p>
    </body>
</html>