获取页面元素方式 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 onkeydown点击 js设置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;或者false checked selected disabled readonly等 => input.disabled = true; innerText textarea是成对的标签,中间的内容可以使用 innerText 设置 textarea也属于表单的标签,可以使用 value 属性设置 要设置文本域中的文本内容推荐使用 innerText 设置/获取 某个标签中的任意文字内容 element.textContent || element.innerText innerText和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多个元素demo
var 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( '这是一个注释' ) );