DOM是文档对象模型,主要是用于操作文档的节点、内容、属性的。除了上篇提到的基本语法(获取元素、增删改查等方法外),还有对节点内容、样式、属性的操作。
1、 对节点内容的操作
innerHTML:会渲染标签;
innerTEXT:不会渲染标签,仅操作文本内容;
outerHTML:除了有innerHTML的东西外还包括外面一层标签;
2、对节点属性的操作
以下3种
<body>
<div title="11" data-index="233">222</div>
<script>
var oDiv = document.querySelector('div');
// 自带属性
// 缺点,不能获取到自定义属性,除非是js后面添加的
console.log(oDiv.title)
console.log(oDiv['title'])
// 自定义属性
oDiv.dataset.aaa ='2';
console.log(oDiv.dataset)
//Attributes: 获取该节点所有属性,包括自定义属性。返回指定节点属性的集合。
// 可以使用 length 属性确定属性的数量,然后可以遍历所有的属性节点提取想要的信息。
oDiv.setAttribute('ccc','111')