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对象.innerTextDOM对象.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 falseonkeydown事件onselect事件onmouseover事件