8.cloneChild方法用来克隆一个元素节点,传递一个布尔参数,参数为true时表示复制当前节点及其所有子节点,参数为false时表示支付至当前节点。语法:目标元素.cloneChild(true|false);
9.removeChild方法用来删除一个指定节点。语法:removeChild(要删除的节点);
10.getAttribute方法用来获取一个属性的值。语法:目标元素.getAttribute(元素属性名称);
11.setAttribute方法用来设置一个属性的值,没有该属性则创建。语法:目标元素.setAttribute(元素属性名称,属性值);
12.removeAttribute方法用来删除一个属性节点。语法:目标元素.removeAttribute(要删除的属性名称);
DOM操作内容
1.innerHTML属性用来获取和设置HTML内容。语法:元素节点.innerHTML 或者 元素节点.innerHTML = 'HTML字符串';
2.innerText|textContent属性用来获取和设置文本内容。fireFox使用textContent来获取和设置(注意兼容性)。语法:元素节点.innerText 或者 元素节点.innerText = 'HTML字符串';
DOM操作样式
1.style属性用来获取和设置元素的行内样式。语法:element.style;style属性只能获取和设置行内样式,对于如font-size这种样式属性,应该去掉 - 并且将 - 后面的第一个字母大写,驼峰法来获取和设置 如:element.style.fontSize , element.style.backgroundColor
2.getComputedStyle全局方法用来获取计算后的样式,第一个参数是元素节点,第二个参数是类型,如:hover,:active等伪类,默认情况下传 null ,某些IE版本使用currentStyle属性来获取 box.currentStyle。语法:window.getComputedStyle(元素,类型)
3.className属性用来获取和设置元素的样式名称。语法:element.className
4.自定义的 addClass() | hasClass() | removeClass() 方法
//元素是否含有某样式 function hasClass(element,className){ return !!element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)')); } //向元素添加新样式 function addClass(element,className){ if(hasClass(element,className) == false){ element.className += ' '+className; } } //移除元素的指定样式 function removeClass(element,className){ var currentClass = element.className; if(hasClass(element,className)){ currentClass = currentClass.replace(new RegExp('(\\s|^)'+className+'(\\s|$)'),' '); //去除空格 currentClass = currentClass.replace(/(^\s*)|(\s*$)/g,''); element.className = currentClass; } }
DOM操作位置和大小
1.clientWidth属性用来获取元素的实际宽度,该值受滚动条和内边距影响,外边距和border不会影响。语法:
element.clientWidth;
2.clientHeight属性用来获取元素的实际高度,该值受滚动条和内边距影响,外边距和border不会影响。语法:
element.clientHeight;
3.offsetWidth属性用来获取元素的实际宽度,该值受边框和内边距影响,外边距和滚动条不会影响。语法:
element.offsetWidth;
4.offsetHeight属性用来获取元素的实际高度,该值受边框和内边距影响,外边距和滚动条不会影响。语法:
element.offsetHeight;
5.offsetTop和offsetLeft属性用来获取元素相对于父级的位置。该值受外边距影响。语法:element.offsetTop ||
element.offsetLeft;
6.scrollTop和scrollLeft属性用来获取滚动条被隐藏的区域大小,也可设置定位到该区域(比如返回顶部)。语法:
element.scrollTop || element.scrollLeft || element.scrollTop = 0;
常用到的简洁快速的document属性和方法
document.title 用来获取文档标题
document.domain 用来获取当前域名
document.URL 用来获取当前url路径
document.forms 获取表单集合
document.images 获取图片集合
document.body 获取body元素节点
document.compatMode 识别文档模式
您可能感兴趣的文章: