1、获取元素
document.getElementById('标签的id值'); document.getElementsByTagName('标签名'); document.getElementsByClassName('标签的类名'); document.getElementsByName('标签的name值'); document.querySelector('选择器'); // 可以传多种 'ul li.active' document.querySelectorAll('选择器');
2、操作元素
操作非表单元素
id title href src className innerHTML innerText
表单元素
value checked disable selected readOnly
操作自定义标签的属性
用户根据需求,自己给标签添加的自己定义的标签属性
<img src='wc.jpg' bigImg='bigWc.jpg' /> <!--bigImg='bigWc.jpg' 就是用户自定义的标签属性-->
节点对象.setAttribute('属性值','值')
节点对象.removeAttribute('属性值','值')
3、操作元素样式
3.1、通过元素的style属性操作
var box = document.getElementById('box'); box.style.width = '100px'; box.style.height = '100px'; box.style.backgroundColor = 'red'; // css→ background-color js→ backgroundColor
var box = document.getElementById('box'); box.className = 'aa bb';//设置 box.className.replace('aa','AA');//替换
注意:元素的style属性适合操作单个样式,而元素className适合操作一组样式
4、节点之间的关系
元素节点.parentNode 节点.childNodes (包括文本节点和元素节点) 节点.children (仅仅是元素节点) 父节点.firstChild; // 获取第一个元素子节点对象,有兼容问题IE9以下不支持: 父节点.firstElementChild 父节点.lastChild // 获取最后一个元素子节点对象,有兼容问题IE9以下不支持 父节点.lastElementChild 节点.previousSibling; // 获取上一个同级的元素节点,有兼容问题IE9以下不支持 节点.previousElementSibling; 节点.nextSibling; // 获取下一个同级的元素节点,有兼容问题IE9以下不支持 节点.nextElementSibling;
5、动态创建、追加、删除元素
document.write('<h2>我是标题</h2>'); ul.innerHTML = ul.innerHTML + '<li><a href="#">我是新的li</a></li>'; var a = document.createElement('a');
父节点.appendChild(新的子节点);
父节点.insertBefore(新的节点,旧的子节点)
父节点.removeChild(子节点)
父节点.replaceChild(新的节点,旧的子节点)
6、事件
/* 功能:给元素注册事件 参数: 事件类型 字符串 注意:事件名不加on 如 'click' 事件处理程序 函数 是否捕获:可选,默认为false */ 事件目标.addEventListener(事件类型,事件处理程序,是否捕获);
/* 功能:移除元素的指定事件程序 参数: 事件类型 字符串 注意:事件名不加on 如:'click' 事件处理程序:函数 注意:这里要把函数名传入过来 */ 事件目标.removeEventListener(事件类型,事件处理程序名称);
7、
8、
事件对象.ctrlKey --
事件对象.keyCode -- 返回ascii码表对应的十进制的数字
10、事件委托
② 在父元素或父级以上元素注册的事件中通过 事件对象.target判断是哪个子元素
③ 根据判断做出处理。
可以代理新动态添加的元素的事件。
// 获取div元素 var divNode = document.getElementById('box'); divNode.onclick = function(e){ // 获取最先触发的元素节点 var node = e.target; // 节点对象.tagName 获取节点对象对应的标签名 返回的是大写 if(node.tagName.toLowerCase()=='p'){ alert(node.innerHTML); } }