-
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8" />
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge" />
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0" />
? ? <title>new document</title>
</head>
<body>
? ? <table border="1" width="50%" id="table">
? ? ? ? <tbody id="tbody">
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <th>學(xué)號</th>
? ? ? ? ? ? ? ? <th>姓名</th>
? ? ? ? ? ? ? ? <th>操作</th>
? ? ? ? ? ? </tr>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td>xh001</td>
? ? ? ? ? ? ? ? <td>王小明</td>
? ? ? ? ? ? ? ? <td><a href="javascript:;" onclick="remove(this)">刪除</a></td>
? ? ? ? ? ? </tr>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td>xh002</td>
? ? ? ? ? ? ? ? <td>劉小芳</td>
? ? ? ? ? ? ? ? <td><a href="javascript:;" onclick="remove(this)">刪除</a></td>
? ? ? ? ? ? </tr>
? ? ? ? </tbody>
? ? </table>
? ? <input type="button" value="添加一行" onclick="judgeId()" />
? ? <!--在添加按鈕上添加點擊事件 ?-->
? ? <script type="text/javascript">
? ? ? ? //定義全局變量
? ? ? ? let trNode = document.getElementsByTagName("tr");
? ? ? ? let newid;
? ? ? ? let oldid;
? ? ? ? let myname;
? ? ? ? let a = 0;
? ? ? ? let b = 0;
? ? ? ? //1,/^\s+$/.test() ? ?使用正則表達式去判斷空白節(jié)點 是空白返回ture 不是就返回false
? ? ? ? // document.write(/^\s+$/.test(" ")); 結(jié)果是ture ?
? ? ? ? // document.write(/^\s+$/.test(" 1")); 結(jié)果是 false ?
? ? ? ? //Delete blank nodes ?刪除空白節(jié)點
? ? ? ? function Debnode(parent) {
? ? ? ? ? ? var nodes = parent.childNodes;
? ? ? ? ? ? for (var i = nodes.length - 1; i >= 0; i--) {
? ? ? ? ? ? ? ? //這里需要倒著來篩選 因為正著來遇到空白節(jié)點將其刪除后，后面的節(jié)點會前移，會影響之后的節(jié)點的下標(biāo)。倒著來就不會了
? ? ? ? ? ? ? ? if (nodes[i].nodeType === 3 && /^\s+$/.test(nodes[i].nodeValue)) {
? ? ? ? ? ? ? ? ? ? parent.removeChild(nodes[i]);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? for (i = 0; i < trNode.length; i++) {
? ? ? ? ? ? Debnode(trNode[i]);
? ? ? ? }
????????/*之所以要刪除空白節(jié)點是因為：
? ? ? ? 1.原h(huán)tml文檔生成的表格中，tr與td，或者td與td之間存在空白節(jié)點，雖然IE瀏覽器會忽略這些空白節(jié)點，
? ? ? ? 但是其他瀏覽器不會，而且格式化后的 html表格文檔必然是上面這種格式 ↑，也就是說必帶空白節(jié)點。
? ? ? ? 2.用Js生成新的tr與td后，這些新的節(jié)點相互之間并不存在空白節(jié)點，且與 html文檔生成的節(jié)點之間也沒有空白節(jié)點。
? ? ? ? 兩者的差異導(dǎo)致 — —選取表格中的元素會很麻煩，空白節(jié)點會礙事。
? ? ? ? 所以，不管是從瀏覽器間的兼容性考慮，還是為了后續(xù)選取表格元素的方便，必須要進行格式上的統(tǒng)一
? ? ? ? 要么在js生成的每一個tr、td節(jié)點前面加一個空白節(jié)點，要么直接清除所有的空白節(jié)點。我當(dāng)然選后者了(畢竟方便嘛，還能降低bug率，，，呃，好吧，其實是我不會加空白節(jié)點，網(wǎng)上查了好久翻了一堆資料，也試了好久，還是失敗了QAQ)。
? ? ? ? 且不只是表格節(jié)點，列表節(jié)點也是同理，所以清除空白節(jié)點還是很有必要噠！*/
? ? ? ? // 鼠標(biāo)移動改變背景,可以通過給每行綁定 鼠標(biāo)移上事件 和 鼠標(biāo)移除事件 來改變所在行的背景色。
? ? ? ? function changeColor() {
? ? ? ? ? ? let i = 1; //表頭不變化
? ? ? ? ? ? for (i = 1; i < trNode.length; i++) {
? ? ? ? ? ? ? ? trNode[i].onmouseover = function () {
? ? ? ? ? ? ? ? ? ? this.style.backgroundColor = "#f2f2f2";
? ? ? ? ? ? ? ? };
? ? ? ? ? ? ? ? trNode[i].onmouseout = function () {
? ? ? ? ? ? ? ? ? ? this.style.backgroundColor = "#fff";
? ? ? ? ? ? ? ? };
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? changeColor();
? ? ? ? //新建一行數(shù)據(jù)的前提判斷條件(id)
? ? ? ? function judgeId() {
? ? ? ? ? ? newid = prompt("請輸入你的學(xué)號:(>=1 and <=999 & 不可重復(fù))");
? ? ? ? ? ? if (newid == "") {
? ? ? ? ? ? ? ? alert("請輸入您的學(xué)號");
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? } else if (newid == null) {
? ? ? ? ? ? ? ? alert("您取消了操作");
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? } else if(isNaN(newid) == true){
? ? ? ? ????????alert("請輸入您的數(shù)字學(xué)號");
? ? ? ? ????????return;
? ? ????????}else {
? ? ? ? ? ? ? ? if (newid < 1 || newid > 999) {
? ? ? ? ? ? ? ? ? ? alert("請輸入正確的學(xué)號");
? ? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? //格式化學(xué)號
? ? ? ? ? ? ? ? ? ? if (newid > 0 && newid < 10) {
? ? ? ? ? ? ? ? ? ? ? ? newid = "00" + newid;
? ? ? ? ? ? ? ? ? ? } else if (newid >= 10 && newid <= 100) {
? ? ? ? ? ? ? ? ? ? ? ? newid = "0" + newid;
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? newid = newid;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? //判斷學(xué)號id是否重復(fù)，根據(jù)返回的值做不同的判斷處理
? ? ? ? ? ? ? ? ? ? for (let i = 1; i < trNode.length; i++) {
? ? ? ? ? ? ? ? ? ? ? ? oldid = JSON.stringify(trNode[i].childNodes[0].innerHTML).substring(3, 6);
? ? ? ? ? ? ? ? ? ? ? ? if (parseInt(newid) == parseInt(oldid)) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? a = 1;
? ? ? ? ? ? ? ? ? ? ? ? ? ? alert("學(xué)號ID重復(fù),添加失敗,請重新添加");
? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? continue;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? oldid = "";
? ? ? ? ? ? ? ? ? ? if (a == 0) {
? ? ? ? ? ? ? ? ? ? ? ? judgeName();
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? a = 0;
? ? ? ? ? ? ? ? ? ? ? ? newid = "";
? ? ? ? ? ? ? ? ? ? ? ? judgeId();
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? //輸入姓名的前提條件
? ? ? ? function judgeName() {
? ? ? ? ? ? myname = prompt("請輸入你的姓名:(可重復(fù)&不可為空)");
? ? ? ? ? ? if (myname == "") {
? ? ? ? ? ? ? ? alert("請輸入您的姓名");
? ? ? ? ? ? ? ? judgeName();
? ? ? ? ? ? } else if (myname == null){
????????????????alert("您取消了操作");
????????????????return;
????????????} else {
? ? ? ? ? ? ? ? insert();
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? // 動態(tài)在表格添加子節(jié)點;
? ? ? ? function insert() {
? ? ? ? ? ? //新建節(jié)點并賦值
? ? ? ? ? ? let tbo = document.getElementById("tbody");
? ? ? ? ? ? let newtr = document.createElement("tr");
? ? ? ? ? ? let newtd1 = document.createElement("td");
? ? ? ? ? ? let newtd2 = document.createElement("td");
? ? ? ? ? ? let newtd3 = document.createElement("td");
? ? ? ? ? ? let newhref = document.createElement("a");
? ? ? ? ? ? newtd1.innerHTML = "xh" + newid;
? ? ? ? ? ? newtd2.innerHTML = myname;
? ? ? ? ? ? newhref.innerHTML = "刪除";
? ? ? ? ? ? newhref.setAttribute("href", "javascript:;");
? ? ? ? ? ? newhref.setAttribute("onclick", "remove(this)");
? ? ? ? ? ? //判斷新節(jié)點插入的位置（行）
? ? ? ? ? ? for (let i = 1; i < trNode.length; i++) {
? ? ? ? ? ? ? ? oldid = JSON.stringify(trNode[i].childNodes[0].innerHTML).substring(3, 6);
? ? ? ? ? ? ? ? if (parseInt(newid) < parseInt(oldid)) {
? ? ? ? ? ? ? ? ? ? a = 1;
? ? ? ? ? ? ? ? ? ? b = i;
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? continue;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? if (a == 1) {
? ? ? ? ? ? ? ? tbo.insertBefore(newtr, trNode[b]);
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? tbo.appendChild(newtr);
? ? ? ? ? ? }
? ? ? ? ? ? //確定好位置(tr)后，插入剩下的節(jié)點(td、a)
? ? ? ? ? ? newtr.appendChild(newtd1);
? ? ? ? ? ? newtr.appendChild(newtd2);
? ? ? ? ? ? newtr.appendChild(newtd3);
? ? ? ? ? ? newtd3.appendChild(newhref);
? ? ? ? ? ? //將變量值恢復(fù)初始值/清空
? ? ? ? ? ? a = 0;
? ? ? ? ? ? b = 0;
? ? ? ? ? ? oldid = "";
? ? ? ? ? ? newid = "";
? ? ? ? ? ? myname = "";
? ? ? ? ? ? changeColor();
? ? ? ? }
? ? ? ? // 創(chuàng)建刪除函數(shù)
? ? ? ? function remove(obj) {
? ? ? ? ? ? let tableNode = obj.parentNode.parentNode.parentNode;
? ? ? ? ? ? let trNode = obj.parentNode.parentNode;
? ? ? ? ? ? tableNode.removeChild(trNode);
? ? ? ? }
? ? </script>
</body>
</html>
查看全部 -
1.在使用<table>中的childNodes時，即使沒有明確定義<tbody>也會默認存在，使用時需要注意。
查看全部 -
網(wǎng)頁卷去的距離與偏移量
我們先來看看下面的圖：
scrollLeft:設(shè)置或獲取位于給定對象左邊界與窗口中目前可見內(nèi)容的最左端之間的距離?，即左邊灰色的內(nèi)容。
scrollTop:設(shè)置或獲取位于對象最頂端與窗口中可見內(nèi)容的最頂端之間的距離?，即上邊灰色的內(nèi)容。
offsetLeft:獲取指定對象相對于版面或由?offsetParent?屬性指定的父坐標(biāo)的計算左側(cè)位置?。
offsetTop:獲取指定對象相對于版面或由?offsetParent?屬性指定的父坐標(biāo)的計算頂端位置 。
注意:
1. 區(qū)分大小寫
2.?offsetParent：布局中設(shè)置postion屬性(Relative、Absolute、fixed)的父容器，從最近的父節(jié)點開始，一層層向上找，直到HTML的body。
運用：elementnode.scrollLeft
查看全部 -
網(wǎng)頁尺寸offsetHeight
offsetHeight和offsetWidth，獲取網(wǎng)頁內(nèi)容高度和寬度(包括滾動條等邊線，會隨窗口的顯示大小改變)。
一、值
offsetHeight = clientHeight + 滾動條 + 邊框。
二、瀏覽器兼容性
var w= document.documentElement.offsetWidth ? ? || document.body.offsetWidth; var h= document.documentElement.offsetHeight ? ? || document.body.offsetHeight;
查看全部 -
網(wǎng)頁尺寸scrollHeight
scrollHeight和scrollWidth，獲取網(wǎng)頁內(nèi)容高度和寬度。
一、針對IE、Opera:
scrollHeight 是網(wǎng)頁內(nèi)容實際高度，可以小于 clientHeight。
二、針對NS、FF:
scrollHeight 是網(wǎng)頁內(nèi)容高度，不過最小值是 clientHeight。也就是說網(wǎng)頁內(nèi)容實際高度小于 clientHeight 時，scrollHeight 返回 clientHeight 。
三、瀏覽器兼容性
var w=document.documentElement.scrollWidth ? ?|| document.body.scrollWidth; var h=document.documentElement.scrollHeight ? ?|| document.body.scrollHeight;
注意:區(qū)分大小寫
scrollHeight和scrollWidth還可獲取Dom元素中內(nèi)容實際占用的高度和寬度。
查看全部 -
瀏覽器窗口可視區(qū)域大小
獲得瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動條）的方法:
一、對于IE9+、Chrome、Firefox、Opera 以及 Safari：
?? window.innerHeight - 瀏覽器窗口的內(nèi)部高度
?? window.innerWidth - 瀏覽器窗口的內(nèi)部寬度
二、對于 Internet Explorer 8、7、6、5：
?? document.documentElement.clientHeight表示HTML文檔所在窗口的當(dāng)前高度。
?? document.documentElement.clientWidth表示HTML文檔所在窗口的當(dāng)前寬度。
或者
Document對象的body屬性對應(yīng)HTML文檔的<body>標(biāo)簽
?? document.body.clientHeight
?? document.body.clientWidth
在不同瀏覽器都實用的 JavaScript 方案：
var w= document.documentElement.clientWidth ? ? ? || document.body.clientWidth; var h= document.documentElement.clientHeight ? ? ? || document.body.clientHeight;
查看全部 -
創(chuàng)建文本節(jié)點createTextNode
createTextNode() 方法創(chuàng)建新的文本節(jié)點，返回新創(chuàng)建的 Text 節(jié)點。
語法：
document.createTextNode(data)
對于文本加入到對應(yīng)標(biāo)簽元素的子節(jié)點上。
查看全部 -
清楚節(jié)點時需要從后往前遍歷，從前往后則會導(dǎo)致刪除錯誤。就像增加需要從前往后添加一樣。
查看全部 -
對于這些插入刪除操作，其開始為所操作元素的父元素。
查看全部 -
Internet Explorer 會忽略節(jié)點之間生成的空白文本節(jié)點，而其它瀏覽器不會。我們可以通過檢測節(jié)點類型，過濾子節(jié)點。?(以后章節(jié)講解)
查看全部 -
注意:
1. IE全系列、firefox、chrome、opera、safari兼容問題
2.?節(jié)點之間的空白符，在firefox、chrome、opera、safari瀏覽器是文本節(jié)點，所以IE是3，其它瀏覽器是7，如下圖所示:
如果把代碼改成這樣:
<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>
運行結(jié)果:（IE和其它瀏覽器結(jié)果是一樣的）
?UL子節(jié)點個數(shù):3
?節(jié)點類型:1查看全部 -
節(jié)點屬性
在文檔對象模型 (DOM) 中，每個節(jié)點都是一個對象。DOM 節(jié)點有三個重要的屬性 ：
1. nodeName : 節(jié)點的名稱
2. nodeValue ：節(jié)點的值
3. nodeType ：節(jié)點的類型
一、nodeName 屬性:?節(jié)點的名稱，是只讀的。
1.?元素節(jié)點的 nodeName 與標(biāo)簽名相同
2.?屬性節(jié)點的 nodeName 是屬性的名稱
3.?文本節(jié)點的 nodeName 永遠是 #text
4.?文檔節(jié)點的 nodeName 永遠是 #document二、nodeValue 屬性：節(jié)點的值
1. 元素節(jié)點的 nodeValue 是?undefined 或 null
2. 文本節(jié)點的 nodeValue 是文本自身
3. 屬性節(jié)點的 nodeValue 是屬性的值三、nodeType 屬性:?節(jié)點的類型，是只讀的。以下常用的幾種結(jié)點類型:
元素類型?? ?節(jié)點類型
? 元素 ? ? ? ? ?1
? 屬性 ? ? ? ? ?2
? 文本 ? ? ? ? ?3
? 注釋 ? ? ? ? ?8
? 文檔 ? ? ? ? ?9查看全部 -
復(fù)選框勾：____.checked=true/false
查看全部 -
getElementsByName()
查看全部 -
HTML文檔可以說由節(jié)點構(gòu)成的集合，DOM節(jié)點有:
1.?元素節(jié)點：上圖中<html>、<body>、<p>等都是元素節(jié)點，即標(biāo)簽。
2.?文本節(jié)點:向用戶展示的內(nèi)容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3.?屬性節(jié)點:元素屬性，如<a>標(biāo)簽的鏈接屬性href="http://idcbgp.cn"。
節(jié)點屬性:
遍歷節(jié)點樹:
DOM操作:
注意:前兩個是document方法。
查看全部
舉報