剑指前端（前端入门笔记系列）——DOM（属性节点）
程序员文章站
2022-05-26 14:49:18
DOM（属性节点） 属性节点没有过参加家族关系中,其专用选择器：attributes，返回值为对象的形式，它的键是索引值，也就是用对象模拟了一个伪数组，DOM中选择器返回的都是伪数组（可以使用数组的形式遍历，操作。但是不能使用数组的方法），下面是属性节点的操作
dom（属性节点）
属性节点没有过参加家族关系中,其专用选择器：attributes，返回值为对象的形式，它的键是索引值，也就是用对象模拟了一个伪数组，dom中选择器返回的都是伪数组（可以使用数组的形式遍历，操作。但是不能使用数组的方法），下面是属性节点的操作
<div class="box" title="这是一个title" width="400"></div>
<script type="text/javascript">
var obox = document.queryselector(".box");
console.log(obox);
// 属性节点
console.log(obox.attributes[1].nodename);
console.log(obox.attributes[1].nodevalue);
obox.attributes[1].nodevalue = "换了一个title";
console.log(obox);
</script>
我们都知道，属性分为内置和自定义，那么我们以此为分类依据来解析属性的操作。
内置（系统提供的）
- 可见（在代码中能够书写的）
1.使用对象的操作（注意class,是个关键字,需要改成classname）
点语法
<div class="box" title="这是一个title" width="400"></div>
<script type="text/javascript">
var obox = document.queryselector(".box");
console.log(obox.title);
console.log(obox.classname);
</script>
中括号语法
<div class="box" title="这是一个title" width="400"></div>
<script type="text/javascript">
var obox = document.queryselector(".box");
console.log(obox["title"]);
console.log(obox["classname"]);
</script>
【注】其中style属性包含了几乎所有的样式，可以通过style.属性名的方式来获取和设置，先来看一下该属性里的信息
<div class="box"></div>
<script type="text/javascript">
var obox = document.queryselector(".box");
console.log(obox.style);
</script>
我们可以看到，里面包含了几乎所有的css样式，只不过因为没有设置，都是空字符，下面我们来设置一些，看一些有没有改变
<script type="text/javascript">
var obox = document.queryselector(".box");
obox.style.border = "solid 2px black";
obox.style.display = "block";
obox.style.left = "10";
obox.style.background = "red";
console.log(obox.style);
</script>
我们可以看到，设置是成功的，不过比起一个一个来设置，有一条属性可以同时设置多个样式，而且还可以直接写css语句，语义化更强，更符合逻辑，下面来测试一下
<div class="box"></div>
<script type="text/javascript">
var obox = document.queryselector(".box");
obox.style.csstext = "width:100px;height:200px;";
console.log(obox.style);
</script>
那么，style.csstext属性将是我们操作系统内置可见属性的利器
2.attribute系列
该系列可以获取、设置以及删除属性节点，后面可见自定义的属性操作也是使用该系列
<div class="box" width="100" height="200" border="2px solid black"></div>
<script type="text/javascript">
var obox = document.queryselector(".box");
console.log(obox);
obox.setattribute("background","red");
obox.setattribute("title","sc");
console.log(obox.getattribute("width"));
console.log(obox.getattribute("border"));
console.log(obox.getattribute("background"));
console.log(obox.getattribute("title"));
obox.removeattribute("height");
</script>
- 不可见（在代码中能够书写的）
使用对象的操作
<div class="box"><span>hello world!</span></div>
<script type="text/javascript">
var obox = document.queryselector(".box");
// innerhtml能解析能获取标签
// innertext不能解析不能获取标签
console.log(obox.innerhtml);
console.log(obox["innerhtml"]);
console.log(obox.innertext);
console.log(obox.tagname);
console.log(obox.nodename);
</script>
自定义（自己设置）
- 可见（在代码中能够书写的）
attribute系列
<div class="box"></div>
<script type="text/javascript">
var obox = document.queryselector(".box");
console.log(obox);
obox.setattribute("a","aaaaaaaaaaaaa");
obox.setattribute("b","bbbbbbbbbbbbb");
console.log(obox.getattribute("a"));
console.log(obox.getattribute("b"));
obox.removeattribute("a");
obox.removeattribute("b");
console.log(obox.getattribute("a"));
console.log(obox.getattribute("b"));
</script>
- 不可见（在代码中能够书写的）
使用对象的操作
点语法
<div class="box"></div>
<script type="text/javascript">
var obox = document.queryselector(".box");
console.log(obox);
console.log(obox.qwe);
obox.qwe = "hahahahah";
console.log(obox.qwe);
</script>
中括号语法
<div class="box"></div>
<script type="text/javascript">
var obox = document.queryselector(".box");
console.log(obox);
console.log(obox["asd"]);
obox["asd"] = "duangduangduang";
console.log(obox["asd"]);
</script>