节点操作
<div>我是建立的div标签</div>
<script>
// 节点的操作
// 节点的 新增 删除 克隆 写入
// 节点的创建
// 创建标签节点: document.createElement('标签名称');
// 创建的是一个标签对象
// 之前是设定字符串,写入HTML文件,浏览器执行为标签效果
// 创建文本节点: document.createTextNode('要创建的文本内容');
// 现在创建的是一个对象,要操作标签的内容,属性属性值等,必须要通过对象的方法来设定
var oDiv = document.createElement('div');
// 使用操作对象的方式,给标签添加设定
oDiv.id = 'div1';
// setAttribute,来设定自定义属性
oDiv.setAttribute('index' , 1);
console.dir(oDiv);
var oText = document.createTextNode('要创建的文本内容');
console.log(oText);
// 删除节点 删除当前标签中的子级节点
// 当前标签.removeChild('你要删除的节点')
// 克隆节点 克隆复制当前节点对象
// 只克隆标签本身 当前标签.cloneNode();
// 克隆标签以及标签内容 当前标签.cloneNode(true);
// 写入节点
// 当前标签.appendChild(你要写入的标签对象) 在当前标签结束位置写入
// 当前标签.insertBefore(你要写入的标签对象 , 在哪个子级标签前) 在当前标签,子级标签之前,写入
// 一个标签对象,只会出现在最后一次写入的位置
// 相对对于将一个标签对象,多次写入,从上一个位置,会移动到下一个位置
// 只会出现在最后一个位置
var d = document.querySelector('div');
d.appendChild(oText);
d.insertBefore(oDiv , d.firstChild);
d.appendChild(oDiv);
获取节点对象
<!-- 我是注释1 -->
<div name="div" index="1" href="aaa" checked>我是标签div
<!-- 我是注释2 -->
<span>我是标签span</span>
</div>
<!-- 我是注释3 -->
<p>我是标签p</p>
<script>
// 获取节点对象的方法
var oDiv = document.querySelector('div');
// 1,获取当前标签中所有的子级节点
// 执行结果,是一个伪数组,可以forEach()
// 形式是与 querySelectorAll() 获取的伪数组是一样的
console.log( oDiv.childNodes );
// 2,获取当前标签中,所有的元素节点/标签节点
// 执行结果,是一个伪数组,不能forEach()
// console.log( oDiv.children );
// 3,获取当前标签中,第一个节点
// 执行结果,是一个对象,内容形式与DOM操作方式,获取的内容是一样的
console.dir( oDiv.firstChild );
// 4,获取当前标签中,最后一个节点
// 执行结果,是一个对象,内容形式与DOM操作方式,获取的内容是一样的
// console.dir( oDiv.lastChild );
// console.dir( document.querySelector('span') );
// 5,获取当前标签中,第一个标签节点,其他节点不会获取
// console.log( oDiv.firstElementChild );
// 6,获取当前标签中,最后一个标签节点,其他节点不会获取
// console.log( oDiv.lastElementChild );
// 7,获取当前标签,上一个兄弟节点(找哥哥)
// 如果没有执行结果是null
// console.log( oDiv.previousSibling );
// 8,获取当前标签,下一个兄弟节点(找弟弟)
// 如果没有执行结果是null
// console.log( oDiv.nextSibling );
// 9,获取当前标签,上一个兄弟元素节点(找标签哥哥)
// console.log( oDiv.previousElementSibling );
// 10,获取当前标签,下一个兄弟元素节点(找标签弟弟)
// console.log( oDiv.nextElementSibling );
// 11,获取当前标签,父级节点
// 只获取直接父级节点
// console.log( oDiv.parentNode );
// console.log( document.querySelector('span').parentNode );
// 12,获取当前标签,所有属性节点
// 执行结果,是一个伪数组,不能forEach()
// console.log( oDiv.attributes );
// 总结
// 1,通过节点操作获取的对象/伪数组与通过 DOM操作的对象/伪数组,形式上是一致的
// 可以相互操作,DOM方法可以操作 节点对象
// 节点方法可以操作 DOM对象
// 2,执行结果,伪数组/对象
// 伪数组有的可以forEach, 有的不能forEach
//
名称内容
// 节点的类型,名称,内容
// 节点的类型: 对象.nodeType 属性中存储,数据是 一个数值
// 元素节点/标签节点 : 1
// 属性节点 : 2
// 文本节点 : 3
// 注释节点 : 8
// 节点的名称: 对象.nodeName
// 元素节点/标签节点 : 大写字母的 标签名称
// 属性节点 : 小写字母的 属性名称
// 文本节点 : #text
// 注释节点 : #comment
// 节点的内容: 对象.nodeValue
// 元素节点/标签节点 : null
// 属性节点 : 属性的属性值
// 文本节点 : 文本内容,包括换行和空格
// 注释节点 : 注释内容,包括换行和空格
