?

帶有Element和不帶的區(qū)別

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

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

獲取所以子節(jié)點

　　　　a)? ?. childNodes

　　　　b)? ?. children

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

. children：獲取所有子節(jié)點

opacity：0-1；透明度

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

先綁定事件再進行循環(huán)

previousNode（）上一個兄弟節(jié)點

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

獲取body，var body = document.body；

?設置樣式的兩種方式

style

行內式可以獲取打印出來

內嵌和外鏈的獲取不了

樣式少的時候使用

駝峰命名規(guī)則

style屬性是對象屬性

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

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

　　　　

菜單的簡單練習

?

style屬性的練習

?

改變盒子的大小和透明度

?

文本框獲取焦點高亮顯示

?

高級隔行變色

?

百度皮膚

?

隱藏盒子的方式

?

定位和層級

?

dom元素的創(chuàng)建方法

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

　　　　　　A)? script寫在那就創(chuàng)建在那

　　　　　　B)? 會被覆蓋

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

　　3.已有節(jié)點.appendChild（創(chuàng)建的節(jié)點）；追加新節(jié)點到已有節(jié)點的最后面

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

　　4.已有節(jié)點.insertBefore（創(chuàng)建的節(jié)點，已有節(jié)點的子節(jié)點節(jié)點）；在已有節(jié)點的子節(jié)點之前創(chuàng)建一個新的節(jié)點

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

　　5.刪除?? 父節(jié)點.removeChild（要刪除的子節(jié)點）；

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

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

　　6.替換? 父節(jié)點.replaceChild（新節(jié)點，老節(jié)點）；

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

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

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

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

　　　　

dom元素的創(chuàng)建

?

元素的操作

?

創(chuàng)建列表，高亮顯示

?

祝愿墻

?

選擇水果

?

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

總結

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

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