webapi的基本操作

2021-10-12 12:39:18 字數 1999 閱讀 1609

自定義屬性

可以在使用dom操作元素的時候,可以給元素新增一些其原本沒有的屬性,來記錄一些資料

元素物件.屬性名 獲取屬性值

元素物件.getattribute(屬性名) 獲取屬性值

區別:通過物件名點屬性名獲取到的是元素的屬性值,並且對css屬性以css形式返回。不能獲取到自定義屬性的值

通過getattribute獲取屬性值,返回的結果是以字串體現,可以獲取到自定義屬性的值

元素物件.屬性名=屬性值

元素物件.setattribute(屬性名,屬性值);//屬性名完全按照元素原本的屬性名設定,否則將是自定義屬性

區別:通過元素物件.屬性名=屬性值只能設定元素物件原有的一些屬性,無法設定自定義屬性

通過元素物件.setattribute(屬性名,屬性值)可以設定任何屬性

使用自定屬性來讓標籤自己記錄一些不保密的資料,但是又要跟隨元素的變化而變化的資料

元素物件.removeattribute(屬性名)

自定義屬性目的:是為了儲存一些資料,有些資料可以儲存到頁面裡而這些資料不需要儲存到伺服器資料庫中。

自定義屬性獲取和建立基本上都是通過和attribute有關的兩個函式實現

自定義屬性有可能會產生很多的歧義,並且不是很好區分到底是標籤原有屬性還是自定義屬性

h5新增了自定義屬性:

h5裡面規定自定義屬性必須以data-開頭作為屬性名稱並且賦值

獲取h5自定義屬性和設定自定義屬性依然使用attribute函式

在h5裡面新增了元素名稱.dataset.屬性名稱或者元素名稱.dataset[屬性名稱],在ie11裡面才能被支援,這裡使用的屬性名稱不包含data-,dataset屬性會將這個元素的所有自定義屬性全部以鍵值對的方式儲存起來

網頁頁面中的所有內容都是節點(標籤、屬性、文字、注釋等),在dom中節點以node來表示

在使用dom操作對節點實現修改、新增、刪除操作

一般情況下,節點至少擁有三個基本屬性

nodetype:節點型別,這裡的型別是標籤的名稱

nodename:節點名稱,這裡的名稱是js中給這個節點起的乙個名字

nodevalue:節點值

document.createelement(「div」)

document.createelement(tagname)方法建立由tagname指定的html元素,因為這些元素原先不存在document裡面,而是根據我們的需求動態建立的,所以這種建立方式的元素叫做動態節點

同時建立的節點需要新增到html文件中

node.insertbefore(節點,子節點),方法將乙個節點元素新增到指定的父節點中的指定子節點之前

利用dom將節點劃分為不同的層級關係,常見的層間關係就是父子關係

一般操作包含以下:

父級節點:node.parentnode

子級節點:

node.childnodes(標準),返回包含指定子節點的集合,這個集合會進行即時更新

注意:返回值裡面包含了所有的子節點包括孫子級別,還包含有文字節點,如果只想要獲取裡面的元素節點,需要專門處理。因此一般不用這個方式

parentnode.children(非標準),是乙個唯讀屬性,返回所有的子元素節點,它只返回子元素節點,不會返回瀏覽器的格式化節點

之後主要使用這個屬性

第乙個子節點:parentnode.firstchild

返回第乙個子節點,找不到則返回null,同樣包含文字節點

最後乙個子節點:parentnode.lastchild

返回最後乙個子節點,找不到則返回null,同樣包含文字節點

第乙個子元素節點:parentnode.firstelementchild

返回第乙個子元素節點,找不到則返回null,只找元素,ie9之後

最後乙個子元素節點:parentnode.lastelementchild

返回最後乙個子元素節點,找不到則返回null,只找元素,ie9之後

兄弟節點:

上面兩個只管元素問題,有相容問題

上面兩個找所有的節點包含文字節點

Web APi入門之基本操作(一)

最近學習了下webapi,webapi是restful風格,根據請求方式決定操作。以部落格的形式寫出來,加深印象以及方便以後檢視和複習。1 首先我們使用vs建立乙個空的webapi專案 2 新建實體以及控制器類 1 public class product 2 4 public string nam...

Web API 基本認知

作用 就是使用 js 去操作 html 和瀏覽器 分類 dom 文件物件模型 bom 瀏覽器物件模型 概念 dom document object model 文件物件模型 是用來呈現以及與任意 html 或 xml文件互動的api dom document object model 是將整個 ht...

webAPI 操作元素

1.獲取元素 2.事件基礎 3.操作元素內容 4.操作元素普通屬性 5.操作元素表單屬性 6.操作元素樣式屬性 7.操作元素自定義屬性 檢視元素物件裡面的屬性和方法 console.dir 元素名 事件三要素 btn.onclick function const img document.query...