Day15 jss整体结构梳理

JS
  DOM---
    两个步骤：
	1 查找标签
	   （1）直接查找
	        document.getElementById(“idname”)          // dom对象
			document.getElementsByTagName(“tagname”)   // dom对象的集合   [dom1,dom2,..]
			document.getElementsByClassName(“name”)    // dom对象的集合   [dom1,dom2,..]

	    (2) 导航查找
		      --- 通过某一个标签定位到另一个标签

			    parentElement           // 父节点标签元素

				children                // 所有子标签

				firstElementChild       // 第一个子标签元素

				lastElementChild        // 最后一个子标签元素

				nextElementtSibling     // 下一个兄弟标签元素

				previousElementSibling  // 上一个兄弟标签元素

	2 操作标签

	    (1) 文本操作
		    取值操作:
			DOM对象.innerText
			DOM对象.innerHTML

			赋值操作：

			DOM对象.innerHTML="hello world"
            DOM对象.innerText="hello world"

        (2) 属性操作
			  DHTML的简洁语法：
			  console.log(DOM对象.属性名);
			  DOM对象.属性=值

			  原生JS：

			  console.log(DOM对象.getAttribute("属性名"))
			  DOM对象.setAttribute("属性名","值")

			  value：
			        input，select ，textarea

		(3) class属性操作
		      DOM对象.classList.add("hide");
              DOM对象.classList.remove("c1");

			  左侧菜单实例

		(4) css样式设置
		      DOM对象.style.样式属性=样式值

     节点操作

	    1 创建节点
		  document.createElement("a");

		2 添加节点
		  父节点.appendChild(添加节点)

		3 删除节点
		  父节点.removeChild(子节点)

		4 替换节点
		  父节点.replaceChild(新节点，被替换节点)

    事件

	    onclick     单击事件
	    ondblclick  双击事件

		onload事件
		onsubmit事件   阻止默认事件发生：return false

		onkeydown事件

		onselect事件

		onmouseover事件