?

帶有Element和不帶的區別

　　　　a)? 帶Element的獲取的是元素節點

　　　　b)? 不帶可能獲取文本節點和屬性節點

獲取所以子節點

　　　　a)? ?. childNodes

　　　　b)? ?. children

　　　　c)? ?. parentNode . children [索引]

. children：獲取所有子節點

opacity：0-1；透明度

alpha（opacity：百分數）；IE6/7/8透明度

先綁定事件再進行循環

previousNode（）上一個兄弟節點

alert（變量名）可測試變量名是否可以使用

獲取body，var body = document.body；

?設置樣式的兩種方式

style

行內式可以獲取打印出來

內嵌和外鏈的獲取不了

樣式少的時候使用

駝峰命名規則

style屬性是對象屬性

值是字符串類型，沒設置的時候是“空字符串”

.style. cssText = “字符串形式的樣式”

　　　　

菜單的簡單練習

?

style屬性的練習

?

改變盒子的大小和透明度

?

文本框獲取焦點高亮顯示

?

高級隔行變色

?

百度皮膚

?

隱藏盒子的方式

?

定位和層級

?

dom元素的創建方法

　　1.documrnt.write（“<li></li>”）

　　　　　　A)? script寫在那就創建在那

　　　　　　B)? 會被覆蓋

　　2.parentNode.innerHTML += “<li></li>”

　　3.已有節點.appendChild（創建的節點）；追加新節點到已有節點的最后面

var ul = document.getElementsByTagName('ul')[0]; ? ? ? ? ?//獲取已有元素
var li = document.createElement('li'); ???????????????????????????//創建一個li標簽
var liText = document.createTextNode('我是一個LI標簽'); //創建一個文本節點
ul.appendChild(li); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//把li標簽追加到ul最后面
li.appendChild(liText);???????????????????????????????? ???????????//把文本節點追加到li標簽中

　　4.已有節點.insertBefore（創建的節點，已有節點的子節點節點）；在已有節點的子節點之前創建一個新的節點

var ul = document.getElementsByTagName('ul')[0]; ????????????????//獲取已有元素
var li = document.createElement('li'); ????????????????????????　　???//創建一個li標簽
var liText = document.createTextNode('我是一個LI標簽'); ? //創建一個文本節點
li.appendChild(liText); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //把文本節點追加到li標簽中
var list = document.getElementsByTagName('li')[2]; ? ? //獲取ul的一個子節點
ul.insertBefore(li,list);? ?????????????????????????????????????????//添加在list標簽之前

　　5.刪除?? 父節點.removeChild（要刪除的子節點）；

A)? var ul = document.getElementsByTagName('ul')[0]; ? ? ?//獲取已有元素
var li = document.createElement('li');?????????????????????????? ?//創建一個li標簽
var liText = document.createTextNode('我是一個LI標簽'); //創建一個文本節點
var list = document.getElementsByTagName('li')[2]; ? ? //獲取ul的一個子節點
ul.removeChild(list); ??????????????????????????????????????????????//刪除ul里的list節點

list.parentNode.removeChild(list); ? ? ? ? ? ? ? ? ? ? ? //現照到list的父元素，在進行刪除，可以不定義父元素

　　6.替換? 父節點.replaceChild（新節點，老節點）；

A)? var ul = document.getElementsByTagName('ul')[0]; ? ? //創建一個文本節點
var li = document.createElement('li'); ???????????????????????????//創建一個li標簽
var liText = document.createTextNode('我是一個LI標簽'); //創建一個文本節點
li.appendChild(liText); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//把文本節點追加到li標簽中
var list = document.getElementsByTagName('li')[2];?//replaceChild 替換節點
ul.replaceChild(liText,list); ?????????????????????????????????????//liText替換叼list

　　7.克隆? var 變量 = 被克隆的節點.cloneNode（true）；? （如果true改為false，那么將克隆一個空節點）

var newNode = li.cloneNode(true); ? ? ? ? ? ? ?//克隆一個li節點給變量newNode

ul.appendChild (newNode); ? ? ? ? ? ? ? ? ? ? ? ? //將克隆的節點添加到ul之后

　　　　

dom元素的創建

?

元素的操作

?

創建列表，高亮顯示

?

祝愿墻

?

選擇水果

?

轉載于:https://www.cnblogs.com/huangshikun/p/6637908.html

總結

以上是生活随笔為你收集整理的JS-DOM ～ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性...的全部內容，希望文章能夠幫你解決所遇到的問題。

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