JS DOM基础操作属性、类、CSS样式

操作属性和类

一、属性节点操作

　　文本节点内容的获取和修改：

　　　　语法：elementNode.attributeName （元素节点.属性名）
　　　　　　也可以使用“[ ]”　　（元素节点[属性名]）

　　注意：一般我们操作属性节点时是不需要获取属性节点的，而是直接通过元素节点获取（/修改）属性节点的值。

　　　　　　特别的，有些属性名称与js关键字或者保留字冲突了，只能用另外的名字：
　　　　　　　class属性：要写成className（class是关键字）。
　　　　　　　label标签的for属性：写成htmlFor。

　　通过方法操作属性节点：

　　　　element.getAttribute(attributeName)　　　　　　　　　返回元素节点的指定属性值

　　　　element.setAttribute(attributeName, attributeValue) 　　　指定属性设置或更改为指定值

　　　　element.removeAttribute(attributeName)　　　　　　　　从元素中移除指定属性

　　　　ement.hasAttribute(attributeName)　　　　　　　　　　如果元素拥有指定属性，则返回true

二、自定义属性

　　自定义属性：给html标签写一个自己定义的属性。

　　虽然给一个对象添加属性很简单，但是在dom中，给元素节点添加自定义的属性节点，html5中要求自定义属性节点应该为‘data-’开头，

　　比如自定义属性abc，应该写成：　　　　　　　

　　　　　　data-abc
　　这样，要使用时就通过dataset属性即可操作了：

　　例如：a标签有自定义属性‘abc’

<a href="" data-abc=‘123‘></a>
<script>
let aEle = document.querySelector(‘a’);
console.log(aEle.dataset.abc);//123
</script>

注意：attribute相关方法可以操作任意属性，包括自定义属性（对自定义属性使用时必须加‘data-’）

三、html5中class属性的新操作

　　使用classList获取一个元素节点上所有的class值：

<body>
<p id="test1" class="abc qwe">Lorem ipsum dolor sit amet.</p>
<script>
let test1 = document.getElementById("test1");
console.log(test1.classList); // DOMTokenList(2) ["abc", "qwe", value: "abc qwe"]
console.log(test1.classList[0]); // abc
console.log(test1.classList[1]); // qwe
</script>
</body>

　　classList相关方法：

　　　　　　element.classList.add(className)　　　　　　　　添加一个指定名字的class值

　　　　　　element.classList.remove(className)　　　　　　删除一个指定名字的class值

　　　　　　element.classList.contains(className)　　　　　　判断一个指定名字的class值

　　　　　　element.classList.toggle(className)　　　　　　切换一个指定名字的class值，有则删除，无则添加

操作样式

　　所有的样式都是字符串。

一、行内样式

　　单个样式：

　　　　element.style.styleName；

　　　　例子：divEle.style.width=‘200px’;
　　　　　　 element.style.[styleName];
　　　　例子：divEle.style[‘width‘]=‘200px’;

注意：样式名称中的‘-’去掉，换成驼峰命名。

　　　学习html，css时要求少用行内样式，就是为了留给js用的，所以，js中操作css，多数情况下是使用该方式。

　　多个样式：

　　　　element.style.cssText 　　直接获取（/修改）行内样式的整个字符串值

　　　　例子： box.style.cssText = "height: 100px; background-color: red;";

注：基本都适用此种方式。

二、样式表样式

　　　　样式表（包括内联和外联）：

　　　　　　document.styleSheets[0].rules[0].style.backgroundColor = "blue";

　　　　　　　　styleSheets：样式表数组（一个style标签为一个样式表）;
　　　　　　　　rules：所有规则数组（一个“{}”为一条规则）;
　　　　　　　　所以含义是：第0个样式表中第0条规则中的backgroundColor修改为“blue”。

注：基本不用这种方式。

三、最终样式

　　　　由于兼容性问题，最终样式有两种写法：

　　　　　　低版本ie中,用属性currentStyle：
　　　　　　　　　element.currentStyle.styleName ;

　　　　　　火狐和chrome中（现代浏览器），用方法getComputedStyle：
　　　　　　　　　getComputedStyle (Element) .styleName ;

注意：根据需要会使用，但最终样式都是计算出来的样式，为只读的，不可修改。

　　　　兼容性封装：

function getStyle(obj, name) {
if (obj.currentStyle) {//ie浏览器使用currentStyle[name]
return obj.currentStyle[name];
} else {//火狐和chrome浏览器使用getComputedStyle(obj,false)[name]
return getComputedStyle(obj, false)[name];
}
}

补充：获取元素节点的尺寸和位置

　　尺寸：

　　　　　　ELement.clientWidth
　　　　　　ELement.clientHeight　　内容 + 内边距（填充盒）
　　　　　　ELement.offsetWidth
　　　　　　ELement.offsetHeight　　内容 + 内边距 + 边框（边框盒）

　　位置：

　　　　　　ELement.offsetLeft
　　　　　　ELement.offsetTop　　　　边框盒的位置，位置以第一个定位的父级元素为基准

原文地址：https://www.cnblogs.com/jiayouba/p/11925617.html

时间： 2024-10-13 06:11:40