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