07-JS DOM属性
2021-04-25 20:27
标签：tor element 文字 spl log spel OLE rem classname 固有属性（property） 自定义属性（atrributes） 获取div的xx属性值 删除div的xx属性值 创建div的yy属性 布尔属性 除了用checked选中外，还可以 除了用selected选中外，还可以 除了用readonly外，还可以 readonly跟disable的区别 除了用multiple实现多选外，还可以 除了用hidden进行隐藏外，还可以 字符串属性 常见的字符串属性 W3C全局属性 data属性 获取data属性的值 class属性（classList方法） 获取class各个属性名,用数组的形式输出 判断 元素对象的className 是否存在 给元素对象添加一个新的className 删除元素的类名 元素类名 存在就删除，不存在就添加 07-JS DOM属性 标签：tor element 文字 spl log spel OLE rem classname 原文地址：https://www.cnblogs.com/mingliangge/p/12207676.html
div id="ml" xx="xx" a="b">
console.log(div.attributes.getNamedIteam(‘xx‘).nodeValue);
console.log(div.attributes.[‘xx‘].nodeValue);
div.attributes.removeNamedIteam(‘xx‘);
var attr = document.createAttribute(‘yy‘);
attr.value = ‘bbq‘ ;
div.attributes.setNamedIteam(attr);
input type = "checkbox">北京
input type = "checkbox" checked>上海
input type ="checkbox">广州
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>
var city = document.getElementById("city");
var options = city.options;
options[1].selected = true; //只要令该表达式为真就可以被选中
国籍：input type="text" value="中国" id="country" readonly>
var country = document.getElementById("country");
country.readOnly = true; //只要令该表达式为真就变成只读
readonly可以提交到后端，disable不可以
select name="city" id="city" multiple>
option value="北京"> 北京 option>
option value="上海"> 上海 option>
option value="广州"> 广州 option>
select>
var city = document.getElementById("city");
city.multiple = true; //只要令该表达式为真就可以实现多选
div id="uu" hidden>文字文字文字div>
var uu = document.getElementById("uu");
uu.hidden = true; //只要令该表达式为真就可以实现隐藏
id、title、href、src、lang、dir、accesskey、name、value、class
accesskey、class、contenteditable、dir、hidden、id、lang、spellcheck、style、tabindex、title、translate
button id="btn" type="button" data-toggle="12345″ data-xx-yy="67890″>按钮buttom>
var btn = document.getElementById("btn");
console.log(btn.dataset.toggle); //根据data-后面的名字获取
console.log(btn.dataset.xxYy); //如果data后面有两个-，那么采用驼峰形式的来获取
body class=" aaa bbb ccc ">
body>
var CC = {
getClass : function(ele){
return ele.className.replace(/\s+/, " ").split(" ");
}
}
var body = document.body;
console.log(CC.getClass(body));
var CC = {
hasClass : function(ele,cls){
//方法一
//return -1
//方法二(classList方法)
return ele.classList.contains(cls);
}
}
var body = document.body;
console.log(CC.hasClass(body,‘bbb‘)); //如果bbb的类名存在则返回true
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存在执行删除，不存在执行添加