js有关dom操作学习

dom对象就是操作网页的document

dom节点：

   整个文档是一个文档节点(document对象)
   每个 HTML 元素是元素节点(element 对象)
   HTML 元素内的文本是文本节点(text对象
    每个 HTML 属性是属性节点(attribute对象)
   注释是注释节点(comment对象)

dom查询：

获取元素节点

# getElementById() 通过id获取一个元素节点
# getElementByTagName() 通过标签名获取一组元素节点对象
# getElementByClassName() 通过类名获取一组元素节点对象
# getElementByName() 通过name属性获取一组元素节点对象

获取和设置document内容

.inhteml=newhtml

节点属性

attributes - 节点（元素）的属性节点
nodeType – 节点类型
nodeValue – 节点值
nodeName – 节点名称
innerHTML - 节点（元素）的内容
innerText -节点（元素）的文本值

导航属性：

parentNode - 节点（元素）的父节点 (推荐)
firstChild – 节点下第一个子元素
lastChild – 节点下最后一个子元素
childNodes - 节点（元素）的子节点

parentElement              // 父节点标签元素
children                        // 所有子标签
firstElementChild          // 第一个子标签元素
lastElementChild           // 最后一个子标签元素
nextElementtSibling       // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

dom操作内联样式：

// 元素.style.样式名 = 样式值
// 如果css样式名中有 - ，如background-color，需要将这种样式名修改为驼峰命名法
		box1.style.width = "300px"
		box1.style.height = "300px"
		box1.style.backgroundColor = "#f2f2f2"

# 获取当前样式
      box1.currentStyle.width
      getCompyteStryle(box1.null)这个方法获取当前的样式,需要两个参数一个获取样式的参数，一个传递伪参数，一般都传递null
   var obj=getComputedStyle(box01,null);
# 定义一个函数 getStyle
<script type="text/javascript">
            /*
              定义一个函数，用户获取指定元素的当前样式
              两个参数：obj要获取的元素,name 要获取样式的名字
             */
			function getStyle(obj,name){
				if (window.getComputedStyle){
					return  getComputedStyle(obj,null)[name]
				}else{
					return  obj.currentStyle(name)
				}
			}
			window.onload=function (){
			var box1=document.getElementById('box1');
			var btn01=document.getElementById('btn01');
			btn01.onclick=function (){
				getStyle(box1,"width")
				alert(getStyle(box1,"width"))	}
			}
		</script>

文档节点：整个HTML文档

元素节点： HTML文档中的HTML标签；

属性节点：元素的属性

文本节点： HTML标签中的文本内容

<p id="pid">this is </p>

节点属性：

<script type="text/javascript">
    // console.log(document);
    //获取button对象
    var btn=document.getElementById('btn')
    // 修改按钮的的文本
    btn.innerHTML='Ian button'
</script>

事件

把js直接写在HTML中： 造成代码结构耦合

/*
     * 可以为按钮的对于事件绑定处理函数的形式来处理事件
     */
    // 绑定回调函数，等等处理才执行的函数
    btn.onclick=function (){
        alert("你还点")

执行顺序问题解决“

 <script type="text/javascript">
        /* 浏览器在加载一个页面的时候，是自上向下执行的 ，造成ls无法获取DOM对象，解决方式就是
          引入onload，它会在整个页面加载完成触发

         */
        //添加onload触发事件
        window.onload=function (){
           var btn=document.getElementById("btn");
           //为btn添加一个点击事件
            btn.onclick=function (){
                alert("还点击我");
            };

       };
    </script>

DOM查询

获取文本 .innerHTML

				 //* 4 获取city节点所有li节点
				 var btn04=document.getElementById('btn04');
				 btn04.onclick=function () {
					 //*获取ID=city的节点
					 city = document.getElementById('city');
					 //获取city节点所有li的节点
					 lis = city.getElementsByTagName('li');
					 for (var i = 0; i < lis.length; i++) {
						 console.log(lis[i].innerHTML);
					 }
				 }
				 //5 获取city节点的所有子节点
				 var btn05=document.getElementById('btn05');
					 console.log(btn05.innerHTML)
					 btn05.onclick=function (){
					 	city=document.getElementById('city');
						 //获取city节点的所有子节点
					    cds=city.childNodes;
					    console.log(cds.length);
					    for (var i=0;i<cds.length;i++){
					    	console.log(cds[i])

						}
					    // children返回子元素
					    cds2=city.children
						 console.log(cds2)
					 }
				 //6 获取phone节点第一个节点
				 var btn06 =document.getElementById('btn06')
				 btn06.onclick=function (){
					 var phone=document.getElementById('phone')
					 //获取第一元素
					 var fec=phone.firstElementChild
					 console.log(fec)
					 //获取第一个节点
					 var fc=phone.firstChild
					 console.log(fc)
					 //获取当前节点的子节点
					 var  cn=phone.childNodes;
					 console.log(cn[0])

					 // 获取当前节点的最后一个节点
					 var lc=phone.latElementChild
					 console.log(lc)
				 }

定义函数实现定向功能：

	/*定义一个函数，专门用指定的元素绑定点击事件
			 参数：idStr 要绑定点击响应行的对象 id属性值
			 fun 事件的回调函数，当单击元素时，该函数将会被处理
			*/
			 function myClick(idStr,fun){
			   var btn=document.getElementById(idStr);
			   btn.onclick=fun;}

	window.onload=function (){
				//获取body标签
				var body=document.body;
				console.log(body);
				var de=document.documentElement;
				console.log(de);
				//
				all = document.getElementsByTagName("*");
				console.log(all)
				//根据元素的class属性查询一组元素节点对象
				var a1=document.getElementsByClassName("a1");
				console.log(a1[0])
				//获取document.querySelector()需要一个选择器字符串作为参数，可以根据一个css选择器查询一个元素节点对象--
				var div = document.querySelector(".a1 div")

DOM对象增删改

节点的元素的增删和改

<script type="text/javascript">
      function myClick(idStr,fun){
            btn=document.getElementById(idStr)
            btn.onclick=fun;
         }
      window.onload=function (){
         //1 创建一个"深圳"节点，添加到#city下
         //执行点击btn01的的点击事件
            myClick("btn01",function (){
               //创建li元素的节点创建一个元素节点对象,将创建好的对象作为返回值
            var li=document.createElement('li')
            console.log(li)
            // 建一个文本节点对象,并返回新的节点
            var sz=document.createTextNode("深圳")
            console.log(sz)
            // 将text设置为li的子节点
            // appendChild()向父结点中添加子节点-->
            li.appendChild(sz)
            console.log(li)
            //获取city的节点
               var city=document.getElementById('city')
            city.appendChild(li)
            console.log(city)
         })
         //2 将"深圳"节点添加到#bj前面
         // .insertBefore(插入的子节点,插入位置的子节点)在指定的子节点前插入新的子节点
         myClick("btn02",function (){
            //
            var li=document.createElement("li")
            var text=document.createTextNode("深圳")
            li.appendChild(text)
            var city=document.getElementById("city")
            var bj=document.getElementById('bj')
            city.insertBefore(li,bj)
            console.log(city)

         })
         //3 使用"深圳"节点替换#bj节点  .replaceChild(A,B) 用A节点替换B节点
         myClick("btn03",function (){
            var li=document.createElement("li")
            var text=document.createTextNode("深圳")
            li.appendChild(text)
            var city=document.getElementById("city")
            var bj=document.getElementById('bj')
            city.replaceChild(li,bj)
         })
         //4删除#bj节点 removeChild(bj)删除子节点
            myClick("btn04",function (){
            var city=document.getElementById("city")
            var bj=document.getElementById('bj')
            // city.removeChild(bj)
            bj.parentNode.removeChild(bj)
})
         //5读取#city内的html代码
         myClick("btn05",function (){
            var city=document.getElementById('city')
            alert(city.innerHTML)
         })
         //6设置#bj内的html代码
         myClick("btn06",function (){
            var bj=document.getElementById('bj')
            bj.innerHTML="昌平"
         })
         //7创建一个"顺义"节点，添加到#city下2
         myClick("btn07",function (){
            var city=document.getElementById("city")
             var li=    document.createElement("li")
            li.innerHTML="顺义"
            city.appendChild(li)
         })
      }
      </script>
   </head>

记录的增删改查

// 单击响应的函数
function dela(){
				  //点击一行获取 改行指向，获取父节点的父节点；
					var tr=this.parentNode.parentNode;
					var name=tr.children[0].innerHTML
					if(confirm("确认删除"+name+"吗?")) {
						tr.parentNode.removeChild(tr)
					}
					// 点击超级链接后，会跳转,去掉
					return false;
//1 点击触发删除的
window.onload=function (){
			// 1.1 //点击超链接，删除一个员工信息
			//获取标签a节点
			var alla=document.getElementsByTagName('a')
			// 遍历a节点，为每个超级链接绑定一个单击的响应函数
			for (var i=0;i<alla.length;i++) {
				alla[i].onclick = dela;
			}

 // 点击提交，把输入框记录增加表格中

		//2 点击提交按钮，增加记录
			}
				//2.1 首先获取提交按钮的提交点击事件回调函数

				var addbtn=document.getElementById('addEmpbutton')
				addbtn.onclick=function (){
				// 获取input
					//2.2获取所有input标签
					var namelist=document.getElementsByTagName('input')
					//2.3 创建tr元素
					var tr=document.createElement('tr')
					// 2.3 读取input内容并创建td标签，添加文本，通过appendChild添加tr
			       for (var i=0;i<namelist.length;i++){
			       	  console.log(namelist[i].value);
					   var td=document.createElement('td');
					   td.innerHTML=namelist[i].value;
                       tr.appendChild(td);
                       namelist[i].value=""
					   }
					//2.4 创建td 标签和a标签
					 var td=document.createElement('td');
			         var a =document.createElement('a');

			         var delText=document.createTextNode("Delete");
					  a.appendChild(delText)
			          td.appendChild(a)
					  tr.appendChild(td);
					  a.href="javaScript"
					  a.onclick	=dela;
					 var et=document.getElementById("employeeTable");
					 var tb=et.getElementsByTagName("tbody")[0];
					 tb.appendChild(tr);

			}

dom 操作 css