javascript
JS-DOM ~ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性...
?
a)? 帶Element的獲取的是元素節(jié)點
b)? 不帶可能獲取文本節(jié)點和屬性節(jié)點
a)? ?. childNodes
b)? ?. children
c)? ?. parentNode . children [索引]
?設置樣式的兩種方式
style
菜單的簡單練習
?
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属性...的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Servlet的认识
- 下一篇: JavaScript实用小技巧