DOM (Document Object Model):文档对象模型,DOM的目标: 浏览器为js提供的操作网页文档的接口(apl),浏览器渲染解析文档为dom树,js可以通过dom,来操作节点树。
节点的类型
文档节点 : Document 整个文档
元素节点: Element html元素
文本节点: Text 文本
注释节点: Comment 注释
属性节点: Attr 属性
节点是可获取的 获取后进行下列 :增,删,改,操作 js节点操作
根据id
document.getElementById(id名称);
// 返回的是一个节点对象 返回节点对象。
根据name
document.getElementsByName(name名称);
//返回的是一个数组
根据className 类名
document.getElementsByClassName(类名);
// 返回的是一个数组
根据tagName 标签名
document.getElementsByTagName(标签名);
//返回的是一个数组
根据选择器来查询
document.querySelector() // 返回一个dom节点对象,没有返回Null 返回节点对象。
document.querySelectorAll() //返回的是一个数组,没有返回空数组
获取元素节点相关的其它节点
获取上一个节点
prevSibling: 返回当前节点的上一个节点
prevElementSibling :返回当前节点的上一个元素节点
获取下一个节点
nextSibling : 返回当前的节点下一个节点
nextElementSibling:返回当前节点的下一个元素节点
获取子节点的方法
childNodes; //返回当前节点的所有子节点
children; //返回当前节点的所有元素子节点
firstChild; //返回当前节点的第一个子节点
lastChild; //返回当前节点的最后一个子节点
firstElementChild; //返回当前节点的第一个元素子节点
lastElementChild; //返回当前节点的最后一个元素子节点 、
获取父节点
parentNode:返回当前节点的父节点
对于document.getElement... 与 document.querySelector.. 的区别
动态就是选出的元素会随文档改变:获取某些标签后,进行操作增加,选出的这些元素数量会变化,下面的长度变化,影响for循环。
静态就是取出来之后就和文档的改变无关了,获取某些标签后,进行操作增加,之前进行的选取的结果不会被影响。比如:
var ul = document.querySelector('ul');
var list = ul.querySelectorAll('li');
for(var i = 0; i < list.length; i++){
ul.appendChild(document.createElement('li'));
}
console.log('list.length:',list.length); //输出的结果仍然是 3,不是此时 li 的数量 6
querySelector 与 getElementById 方法的区别
节点操作
createElement 一个由标签名称 tagName 指定的 HTML 元素 只能对document生效。 document.createElement(elementName)
document.createTextNode 只能对document对象生效。
父节点.appendChild(子节点): 添加子节点;
注;如何子节点是网页存在的子节点,那么添加相当于是移动
<body> <div id="div1">The text above has been created dynamically.</div>
<div id="div3">Hi there and greetings!</div>
<div id="div2">The text above has been created dynamically.</div>
<script> //fdsfsdf; addElement ()
function addElement () { //创建一个新的 div 元素
let newDiv = document.createElement("div"); 只能对document生效。
let newDiv1 = document.createElement("div"); //给它一些内容 let newContent = document.creat
TextNode("Hi there and greetings!");
let newContent1 = document.createTextNode("Hi there and greetings!"); // 添加文本节点 到这个新的 div 元素
newDiv.appendChild(newContent);
newDiv1.appendChild(newContent1); // 将这个新的元素和它的文本添加到 DOM 中
let currentDiv = document.getElementById("div1");
let currentDiv1 = document.getElementById("div2");
document.body.insertBefore(newDiv, currentDiv); //第一个在第二个之前插入
document.body.insertBefore(newDiv1, currentDiv1);}
</script>
</body>
结论:大概不能重复使用一个增加的节点,可以用两个变量,完成同种类型的节点的插入。。
appendChild移动括号里的节点。。。。。。。
父节点.removeChild(子节点) 删除
父节点.cloneNode() 复制
node.cloneNode()方法返回调用该方法的结点的一个副本。也称为克隆节点或者拷贝节点
。括号里面为空或者false为浅拷贝,只复制结点不复制内容。
括号里面为true为深拷贝,则该节点的所有后代节点和内容也都会被克隆