js下 Day04 DOM操作 自定義屬性

2022-07-08 15:09:24 字數 1429 閱讀 6850

語法: 元素.getattribute(『自定義屬性名』)

功能:獲取自定義屬性

語法: 元素.setattribute(『自定義屬性名』,』值』)

功能:設定自定義屬性

語法: 元素.removeattribute(『自定義屬性名』)

功能:刪除自定義屬性

效果圖:

功能思路分析:

\1. 找到標籤庫按鈕,繫結點選事件。由於1個按鈕既要展開又要做收起,所以需要用乙個開關變數來判斷(var flag = false;)。為假時點選展開,為真時點選收起。

\2. 迴圈給每乙個li繫結點選事件。由於每乙個li既要做選中又要做取消選中,所以需要用類名來判斷( classlist.contains() )。如果當前類名不存在,點選後則選中:

a. 新增類名( classlist.add() )

如果當前類名存在,則取消選中:

a. 刪除類名(classlist.remove())

b. 找到已選中的所有標籤,判斷每乙個選中的元素和點選的元素**自定義屬性(getattribute())**是否一致

c. 一致則刪除(removechild())

\3. 給轉殖的元素繫結點選事件,實現雙向刪除,並去掉對應標籤的類名。

\4. 個數限制,最多只能新增6個,通過選中標籤的個數(sel.children.length)來判斷。小於6個才可以選中標籤,否則顯示提示資訊。當取消選中標籤時,隱藏提示資訊。

元素.getattribute(『自定義屬性名』) 獲取自定義屬性

元素.setattribute(『自定義屬性名』,』值』) 設定自定義屬性

元素.removeattribute(『自定義屬性名』) 刪除自定義屬性

元素.checked 核取方塊的選中狀態

效果圖:

功能思路分析:

功能一:渲染資料

\1. 宣告兩個陣列存放資料,將第乙個陣列的內容渲染到第乙個盒子,將第二個陣列的內容渲染到第二個盒子(渲染: **map(function(item){}).join( ** 『』));

功能二:標籤轉移

\3. 點選第二個盒子中的標籤新增到第乙個盒子中

Js操作 DOM操作

一 節點屬性 dom 是樹型結構,相應的,可以通過一些節點屬性來遍歷節點樹 方法說明 nodename 節點名稱,相當於tagname.屬性節點返回屬性名,文字節點返回 text。nodename,是唯讀的。nodetype 節點的型別,返回值 1,元素節點 2,屬性節點 3,文字節點。nodety...

js操作dom節點

1.訪問節點 document.getelementbyid id 返回對擁有指定id的第乙個物件進行訪問 document.getelementsbyname name 返回帶有指定名稱的節點集合 注意 elements document.getelementsbytagname tagname ...

js操作dom節點

1.訪問節點 document.getelementbyid id 返回對擁有指定id的第乙個物件進行訪問 document.getelementsbyname name 返回帶有指定名稱的節點集合 注意 elements document.getelementsbytagname tagname ...