webapi中對節點的操作及案列

2022-08-30 05:30:18 字數 2954 閱讀 4995

1.查詢節點:

孩子節點:children 所有的子元素

firstelementchild 第乙個子元素

lastelementchild 最後乙個子元素

firstchild  第乙個子節點

lastchild最後乙個節點

實際中一般不會用系欸但,主要是對元素進行操作

兄弟節點:  previouselementsibling  上乙個兄弟元素

nextelementsibling   下乙個兄弟元素

父節點:parentnode

2.新增節點

parent.insertbefore(a,y)  往任意指定位置y的前面新增a

如果對於頁面中已有的元素,就是剪下的效果

3.轉殖節點

clonenode(deep)

deep是布林型別,為true,表示深拷貝,標籤+內容,如果有id值,需要重新設定,頁面中id值是唯一的

如果值為false,表示淺拷貝,只複製標籤

注意:拷貝出來的和原來之間的修改是互不影響的

4.刪除節點

parent.removechild() 父元素呼叫

5.建立節點

1.document.write() 只能往頁面中寫,頁面載入產生文件流存在覆蓋問題

2.innerhtml  可以識別標籤,慎用,也會存在覆蓋問題

3.document.createelement(tagname)

(1)建立出來的元素是儲存在記憶體中

(2) 需要手動新增到頁面中

(3) 引數:字串型別的標籤名

事件-----概念:觸發-----響應的機制

三要素:事件源,事件名稱,事件處理程式

註冊事件:事件源 on + 事件名稱 = function()

事件觸發了才會執行函式

函式不需要帶哦用,瀏覽器幫我們呼叫執行

表單屬性-------常用的有:type name value checked selected disabled

布林型別的有: checked  selected   disabled

具體說明: 在標籤中,只要有這個屬性,就能起到作用,dom物件屬性值是布林型別(true,false)

例題:實現全選

頁面結構:

doctype html

>

<

html

>

<

head

lang

="en"

>

<

meta

charset

="utf-8"

>

<

title

>

title

>

<

style

>

* .wrap

table

th, td

th td

tbody tr

tbody tr:hover

style

>

head

>

<

body

>

<

div

class

="wrap"

>

<

table

>

<

thead

>

<

tr>

<

th>

<

input

type

="checkbox"

id="j_cball"

/>

th>

<

th>菜名

th>

<

th>飯店

th>

tr>

thead

>

<

tbody

id="j_tb"

>

<

tr>

<

td>

<

input

type

="checkbox"

/>

td>

<

td>紅燒肉

td>

<

td>田老師

td>

tr>

<

tr>

<

td>

<

input

type

="checkbox"

/>

td>

<

td>西紅柿雞蛋

td>

<

td>田老師

td>

tr>

<

tr>

<

td>

<

input

type

="checkbox"

/>

td>

<

td>紅燒獅子頭

td>

<

td>田老師

td>

tr>

<

tr>

<

td>

<

input

type

="checkbox"

/>

td>

<

td>日式肥牛

td>

<

td>田老師

td>

tr>

tbody

>

table

>

div>

body

>

html

>

js的**

這個題目中主要用到的一種思想就是假設成立法,假設乙個結論,然後去推翻結論的過程。

dom節點及對節點的常用操作方法

在說dom節點前,先來看看頁面的呈現 dom渲染流程 1 瀏覽器解析html原始碼,然後建立乙個dom樹。在dom樹中,每乙個html標籤都有乙個對應的節點 元素節點 並且每乙個文字也都有乙個對應的節點 文字節點 dom樹的根節點就是documentelement,對應的是html標籤。2 瀏覽器解...

dom節點及對節點的常用操作方法

dom節點及對節點的常用操作方法 在說dom節點前,先來看看頁面的呈現 dom渲染流程 1 瀏覽器解析html原始碼,然後建立乙個dom樹。在dom樹中,每乙個html標籤都有乙個對應的節點 元素節點 並且每乙個文字也都有乙個對應的節點 文字節點 dom樹的根節點就是documentelement,...

jQuery對元素 節點的操作

一 文字內容的操作 方法 text text val 例子 div div 獲取 div元素 console.log div.text 獲取文字內容 div.text aaaaa 設定了文字的內容 二 html內容的操作 html 用於獲取第乙個匹配元素的 html 內容 html val 用於設定...