JS原生DOM笔记

获取页面元素方式document.getElementById("btn");document.getElementsByClassName("类样式的名字");document.getElementsByName("name属性的值");var div = document.getElementsByTagName("img");document.querySelector();elementList = document.querySelectorAll(selectors);elementList 是一个静态的 NodeList 类型的对象.selectors 是一个由逗号连接的包含一个或多个CSS选择器的字符串.如果 selectors参数中包含 CSS伪元素,则返回一个空的elementList.    => var matches = document.querySelectorAll("div.note, div.alert");    => 返回一个文档中所有的class为"note"或者 "alert"的div元素.事件 onclick onmouseover onmouseout onmouseenter onmouseleave onfocus onblur onkeyup onkeydownjs设置css中属性如果是多个单词,在DOM操作中把-(横杠)干掉,后面的单词首字母大写div.style.width="300px";div.style.backgroundColor="red";div.style.border="3px solid red";在DOM操作中如果要设置某个元素的类样式:请使用:className设置元素的类样式: 对象.className="";获取var cls = div.className;设置,设置多个类中间用空格断开div.className = "mycls";用 对象.style如果样式的代码写在了style属性中  是可以获取的如果样式的代码写在了style标签中,是无法获取的html标签中属性和值是一样的,并且只有一个,就是自己,此时在DOM的操作中,设置该属性的值的时候,用的是 true 或者 false;设置元素的选中: 对象.checked=true;或者falsechecked selected disabled readonly等 => input.disabled = true;innerTexttextarea是成对的标签,中间的内容可以使用 innerText 设置textarea也属于表单的标签,可以使用 value 属性设置要设置文本域中的文本内容推荐使用 innerText设置/获取 某个标签中的任意文字内容 element.textContent || element.innerTextinnerText和textContet作用一样,都可以设置元素中的文本内容和获取元素中的文本内容innerText原本是IE8浏览器中支持的一个属性textContent原本是火狐浏览器中支持的一个属性现在,目前谷歌和火狐和IE8都支持innerText  如果就是设置文字和获取文字使用innerText或者innerHTML都可以innerText如果设置的是标签内容,那么在页面中展示的时候仍然是以文本的方式展示的如果设置的内容是标签+文字内容建议使用innerHTML,获取标签+文字也使用innerHTML大量字符串拼接的时候可以使用数组的方式来解决,大量字符串拼接会占用大量的内存空间自定义属性对象.setAttribute("属性的名字","属性的值");为标签添加自定义属性并赋值 this.setAttribute("score", 10)    通过setAttribute()这种方式添加的属性会在html的标签中显示出来对象.getAttribute("属性的名字");获取该标签的自定义属性的值 this.getAttribute("score")获取,返回的是字符串类型的对象.removeAttribute("属性的名字");移除元素属性克隆元素对象.cloneNode() 参数是布尔类型,我们目前使用true,返回的是节点类型,克隆的是标签返回的就是标签添加元素对象.appendChild("对象");隐藏元素对象.style.display="none";//不占位对象.style.visibility="hidden";//占位对象.style.opacity=0;//占位{    对象.style.opacity=0;    对象.style.opacity=0;}//占位节点节点:页面中所有的内容都是节点(标签,属性,文本(空白,回车,tab))元素:标签叫元素,标签也可以叫对象根节点:html标签也叫根元素,对象nodeType:节点类型     1标签   2属性   3文本     nodeType:如果是标签,值:1,如果值是2---属性,如果值是3---文本nodeName:节点的名字   标签---标签的大写的名字  属性:属性的名字  文本:text    nodeName:如果结果是大写的标签名字,就是标签,如果是#text是文本,如果是属性,就是属性的名字,如果是属性,属性的名字是以小写的方式展示nodeValue:节点的值    nodeValue:如果是null 就是标签,如果是文本内容 就是文本,如果是属性 就是属性的值节点关系当前元素的下一个兄弟节点    对象.nextSibling当前元素的下一个兄弟元素    对象.nextElementSibling当前元素中所有的子节点    对象.childNodes当前元素中所有的子元素    对象.children当前元素的前一个兄弟节点    对象.previousSibling当前元素的前一个兄弟元素    对象.previousElementSibling当前元素中第一个子节点    对象.firstChild当前元素中第一个子元素    对象.firstElementChild当前元素中的最后一个子节点    对象.lastChild当前元素中的最后一个子元素    对象.lastElementChild当前元素的父级节点    对象.parentNode当前元素的父级元素    对象.parentElement获取节点元素兼容代码获取任意元素中最后一个子元素function getLastElement(element) {   if(element.lastElementChild){       return element.lastElementChild;   }else{       //先获取这个元素中的最后一个子节点       var node=element.lastChild;       while(node&&node.nodeType!=1){           node=node.previousSibling;       }       return node;   }

}
//获取任意元素中的第一个子元素
function getFirstElement(element) {
if(element.firstElementChild){
return element.firstElementChild;//返回第一个子元素
}else{
//先获取这个元素中的第一个子节点
var node=element.firstChild;
//节点存在并且节点的类型不是1(不是标签)
while (node&&node.nodeType!=1){
//继续寻找下一个节点,判断节点是不是标签
node=node.nextSibling;
}
return node;
}
}

用节点关系操作<div id="dv">    <p>第1个p</p>    <span>这是第一个span</span>    <p>第2个p</p>    <span>这是第二个span</span>    <p>第3个p</p>    <span>这是第三个span</span></div>//点击按钮div.onclick = function () {    var nodes = my$("dv").childNodes;//获取当前元素中所有的子节点    for (var i = 0; i < nodes.length; i++) {//遍历每个节点        //判断这个节点的类型是不是1,并且这个节点的名字是不是P        if (nodes[i].nodeType == 1 && nodes[i].nodeName == "P") {            //设置节点的背景颜色            nodes[i].style.backgroundColor = "green";        }    }};创建元素 添加元素 删除元素创建var pObj=document.createElement("p");对象.innerHTML="标签及内容";添加div.appendChild(pObj);//追加的意思div.insertBefore(pObj,p);删除div.removeChild(pObj);页面添加n多个元素demovar dv = document.getElementById( 'dv' );var fragment = document.createDocumentFragment();// 创建 100 个 p 标签for ( var i = 0; i < 100; i++ ) {  var p = document.createElement( 'p' );  p.appendChild( document.createTextNode( i ) );  fragment.appendChild( p );  // 每加一次都会重新渲染一次 页面}// 以上都在内存中完成dv.appendChild( fragment );dv.appendChild( document.createComment( '这是一个注释' ) );