DOM
2019-02-12 本文已影响0人
嘤嘤嘤998
节点
在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
image.png
<p>Hello world!</p>
文本节点 "Hello world!" 的父节点是 <p> 节点
编程接口
所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。
DOM常用操作
1. 查找节点
document.getElementById('id属性值'); //返回拥有指定id的第一个对象的引用
document/element.getElementsByClassName('class属性值');
document/element.getElementsByTagName('标签名');
document.getElementsByName('name属性值');
document/element.querySelector('CSS选择器'); //仅返回第一个匹配的元素
document/element.querySelectorAll('CSS选择器'); //返回所有匹配的元素
例如：document.querySelector("#demo");
document.documentElement //获取页面中的HTML标签
document.body //获取页面中的BODY标签
document.all[''] //获取页面中的所有元素节点的对象集合型
2. 新建节点
document.createElement('元素名'); //创建新的元素节点
document.createAttribute('属性名'); //创建新的属性节点
document.createTextNode('文本内容'); //创建新的文本节点
document.createComment('注释节点'); //创建新的注释节点
document.createDocumentFragment( ); //创建文档片段节点
3. 添加新节点
parent.appendChild( element/txt/comment/fragment ); //向父节点的最后一个子节点后追加新节点
parent.insertBefore( newChild, existingChild ); //向父节点的某个特定子节点之前插入新节点
element.setAttributeNode( attributeName ); //给元素增加属性节点
element.setAttribute( attributeName, attributeValue ); //给元素增加指定属性，并设定属性值
4. 删除节点
parentNode.removeChild( existingChild ); //删除已有的子节点，返回值为删除节点
element.removeAttribute('属性名'); //删除具有指定属性名称的属性，无返回值
element.removeAttributeNode( attrNode ); //删除指定属性，返回值为删除的属性
5. 修改节点
parentNode.replaceChild( newChild, existingChild ); //用新节点替换父节点中已有的子节点
element.setAttributeNode( attributeName ); //若原元素已有该节点，此操作能达到修改该属性名的目的
element.setAttribute( attributeName, attributeValue ); //若原元素已有该节点，此操作能达到修改该属性值的目的
//element.setAttributeNode( attributeName );实例：
<body>
<p class="classValue">增添id属性，并修改class属性值</p>
<script>
var element = document.getElementsByTagName('p')[0];
// 添加属性节点
var attr = document.createAttribute('id');
attr.value = 'idValue';
element.setAttributeNode(attr);
// 修改属性值
var attr = document.createAttribute('class');
attr.value = 'classNewValue';
element.setAttributeNode(attr);
</script>
</body>
//element.setAttribute( attributeName, attributeValue ); 实例：
<body>
<p class="classValue">增添id属性，并修改class属性值</p>
<script>
var element = document.getElementsByTagName('p')[0];
element.setAttribute('id','idValue'); //添加属性节点
element.setAttribute('class','classNewValue');//修改属性值
</script>
</body>
添加文本节点，有两种常见方法：
- document.createTextNode('新增文本内容');
function addText(){
var element = document.getElementsByTagName('p')[0];
var txt = document.createTextNode('新增文本内容'); //创建文本节点
element.appendChild(txt); //添加文本节点
}
- element.innerHTML='新增文本内容'; 【推荐】
function addText(){
var element = document.getElementsByTagName('p')[0];
element.innerHTML='新增文本内容'; //插入文本内容
}
