07-JS DOM属性

Posted 2021-03-14 戒奢从简，起早贪黑，努力提升

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了07-JS DOM属性相关的知识，希望对你有一定的参考价值。

固有属性（property）

自定义属性（atrributes）

<div   id="ml"   xx="xx"   a="b">

获取div的xx属性值

console.log(div.attributes.getNamedIteam(‘xx‘).nodeValue);

console.log(div.attributes.[‘xx‘].nodeValue);

删除div的xx属性值

div.attributes.removeNamedIteam(‘xx‘);

创建div的yy属性

var  attr = document.createAttribute(‘yy‘);

attr.value = ‘bbq‘ ;

div.attributes.setNamedIteam(attr);

布尔属性

<input type = "checkbox">北京
<input type = "checkbox" checked>上海
<input type ="checkbox">广州

除了用checked选中外，还可以

var inputs = document.qureySelectorAll("input");

inputs[1].checked = 1 ;    //只要令该表达式为真就可以被选中

<select name="city" id="city">
<option value="北京">  北京 </option>
<option value="上海" selected>  上海 </option>
<option value="广州">  广州 </option>
</select>

除了用selected选中外，还可以

var city = document.getElementById("city");
var options = city.options;
options[1].selected = true;       //只要令该表达式为真就可以被选中

国籍：<input type="text" value="中国" id="country" readonly>

除了用readonly外，还可以

var country = document.getElementById("country");

country.readOnly = true;      //只要令该表达式为真就变成只读

readonly跟disable的区别

readonly可以提交到后端，disable不可以

<select name="city" id="city" multiple>
<option value="北京">  北京 </option>
<option value="上海">  上海 </option>
<option value="广州">  广州 </option>
</select>

除了用multiple实现多选外，还可以

var city = document.getElementById("city");

city.multiple = true;       //只要令该表达式为真就可以实现多选

<div id="uu" hidden>文字文字文字</div>

除了用hidden进行隐藏外，还可以

var uu = document.getElementById("uu");

uu.hidden = true;     //只要令该表达式为真就可以实现隐藏

字符串属性

常见的字符串属性

id、title、href、src、lang、dir、accesskey、name、value、class

W3C全局属性

accesskey、class、contenteditable、dir、hidden、id、lang、spellcheck、style、tabindex、title、translate

data属性

<button id="btn" type="button" data-toggle="12345″ data-xx-yy="67890″>按钮</buttom>

获取data属性的值

var btn = document.getElementById("btn");

console.log(btn.dataset.toggle);   //根据data-后面的名字获取

console.log(btn.dataset.xxYy);     //如果data后面有两个-，那么采用驼峰形式的来获取

class属性（classList方法）

<body class=" aaa bbb ccc ">

</body>

获取class各个属性名,用数组的形式输出

var CC = {

getClass : function(ele){

return ele.className.replace(/s+/, " ").split(" ");

}

}

var body = document.body;

console.log(CC.getClass(body));

判断元素对象的className 是否存在

var CC = {

hasClass : function(ele,cls){

//方法一

//return -1 < (" " + ele.className + " ").indexOf(" " + cls + " ");

//方法二(classList方法)

return ele.classList.contains(cls);

}

}

var body = document.body;

console.log(CC.hasClass(body,‘bbb‘));    //如果bbb的类名存在则返回true

给元素对象添加一个新的className

var CC = {

addClass : function(ele,cls){

//方法一

//if ( !this.hasClass(ele,cls) )

//ele.className += " " + cls;

//方法二(classList方法)

ele.classList.add(cls);

}

}

var body = docement.body;

CC.addClass(body,‘ddd‘);     //如果body里面不存在ddd，则添加ddd类名

删除元素的类名

var CC = {

removeClass : function(ele,cls){

//方法一

//if ( this.hasClass(ele,cls) )

//var reg = new RegExp( ‘(\s|^)‘ + cls + ‘(\s|$)‘ , "gi" );

//ele.className = ele.className.replace(reg, " ");

//方法二(classList方法)

ele.classList.remove(cls);

}

}

var body = document.body;

CC.removeClass(body,‘aaa‘);    //如果body里面存在aaa，则删除掉

元素类名存在就删除，不存在就添加

var CC = {

toggleClass : function(ele,cls){

//方法一

//if ( this.hasClass(ele,cls) )

//{

//this.remove(ele,cls);

//}else{

//this.addClass(ele,cls);

//}

//方法二(classList方法)

return ele.classList.toggle(cls);

}

}

var body = document.body;

CC.toggleClass(body,‘aaa‘);     //如果aaa存在执行删除，不存在执行添加

以上是关于07-JS DOM属性的主要内容，如果未能解决你的问题，请参考以下文章

关于CSS的个人理解

从 DOM 中读取 HTML 片段并向其中添加自定义数据

jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段

jQuery的DOM操作

JavaScript单行代码，也就是代码片段

实用代码片段将json数据绑定到html元素（转）