JS DOM

Posted 2021-01-08 85-q

 

                                   节点操作

在某个子节点的前面插入父节点.insertBefore("新来的","旧节点")

function createLiAtFirst(){
    var str = prompt("请输入点东西");
    var oLi = document.createElement("li");
    oLi.innerhtml = str;
    var oUl = document.getElementById("list");
    
    oUl.insertBefore(oLi,oUl.firstChild);
}

 

js中只有insertBefore() 没有insertAfter
自定义函数实现insertAfter的功能

                   删除节点

1.创建元素节点 document.createElement(标签名)
2.添加到父节点
   父节点.appendChild(子节点)
   父节点.insertBefore(新节点,旧节点)
3.删除节点 父节点.removeChild(子节点)
4.替换节点 父节点.replaceChild(新节点,旧节点)
5.克隆节点 节点.cloneNode() 克隆节点，不克隆子节点
   节点.cloneNode(true)克隆节点，克隆子节点
6.创建文本节点 document.createTextNode("文本值")

function deleteDiv(){
            //将div从父节点body中删除
            // 父节点.removeChild(子节点)
            var oDiv = document.getElementById("box");
            document.body.removeChild(oDiv);
        }

function replaceDiv(){
			//将子节点替换成另一个节点
			// 父节点.replaceChild(新节点,旧节点)
			var oImg = document.createElement("img");
			oImg.src = "XX.jpg";
			oImg.style.width = "400px";
			oImg.style.height = "400px";

			var oDiv = document.getElementById("box");
			document.body.replaceChild(oImg,oDiv);
		}

function cloneDiv(){
			var oDiv = document.getElementById("box");
			//节点.cloneNode() 克隆当前的节点
			// 不传值 默认是false 不会克隆子节点
			// 传值 true 克隆子节点
			console.log( oDiv.cloneNode(true) );
			document.body.appendChild( oDiv.cloneNode(true) );
		}

　　                                        创建动态表格

 

<script type="text/javascript">
        function createTable(){
            // 1.获取行列8
            var rows = parseInt( $("rw").value );
            var cols = parseInt( $("cl").value );
            // 2.创建表格 table标签
                // 2.1 创建table标签，然后添加到body上
                // 2.2 外层循环创建tr,然后把tr添加table;
                // 2.3 内层循环创建td,给td设置宽高背景色。然后把td添加到tr上
            var oTb = document.createElement("table");
            document.body.appendChild(oTb);
            for (var i = 0; i < rows; i++) {
                var oTr = document.createElement("tr");
                oTb.appendChild(oTr);
                for(var j=0;j<cols;j++){
                    var oTd = document.createElement("td");
                    oTd.style.width = "10px";
                    oTd.style.height = "10px";
                    oTd.style.backgroundColor = randomColor();
                    oTr.appendChild(oTd);
                }
            }
        }
 </script>

 

                                           删除表格中行

 

for (var i = 0; i < delBtns.length; i++) {
		//给每一个按钮绑定点击事件的事件处理程序
		// 元素节点.onclick = 函数名/匿名函数
		// object 封装属性和方法
		delBtns[i].onclick =deleteTr;
		
		/*delBtns[i].onclick = function(){
			console.log(this);
		};*/
		
		
	}
	function deleteTr(){
		//按钮-->td-->tr 从 tbody中删除
		// this 指针，指向自己的所归属的对象
		console.log(this);//指的是按钮       
		console.log(this.innerHTML);
		oTb.lastChild.removeChild(this.parentNode.parentNode);
	}