JavaScript学习笔记之DOM基础 2.4(3)

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 识别文档模式

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wggsxz.html