第十章 DOM节点操作
2021-04-29 本文已影响0人
扶光_
一,获取返回节点
1.childNodes()
返回一个数组 这个数组由给定的子节点构成
什么意思呢?来演示一下 首先创建一个ul ,然后返回ul里面的节点
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5 </li>
</ul>
<script>
var ul = document.getElementsByTagName("ul")[0];
console.log(ul.childNodes);
</script>
childNodes
那么大家现在肯定会有一些疑问 ,为什么是11个节点呢? Text 又是什么呢?
那么我们换一种写法来看看
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5 </li></ul>
<script>
var ul = document.getElementsByTagName("ul")[0];
console.log(ul.childNodes);
</script>
childNodes
其实text就是标签之间的空格
2.firstChild
返回给定节点的第一个子节点
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5 </li></ul>
<script>
var ul = document.getElementsByTagName("ul")[0];
console.log(ul.firstChild
);
</script>
firstChild
获取到了第一个li标签 没问题
3.lastChild
给定返回子节点的最后一个节点 这个就不演示了 和上面类似
4.parentNode
返回给定节点的父节点
如果我们给他一个li 他会返回他的父节点ul
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5 </li></ul>
<script>
var ul = document.getElementsByTagName("ul")[0];
var li = ul.getElementsByTagName("li")[2];
console.log(li.parentNode);
</script>
parentNode
5.nextSibling
返回给定节点的下一个节点
如我们获取第三个li 然后用这个 会返回第四个 li
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5 </li></ul>
<script>
var ul = document.getElementsByTagName("ul")[0];
var li = ul.getElementsByTagName("li")[2];
console.log(li.nextSibling);
</script>
nextSibling
6.previousSibling
返回给定节点的上一个节点
跟上面一样 不演示了
7.lastElementChild 如果只返回标签节点 需要一个过滤
返回上一个 也是一样的 需要在中间加一个Element
二,DOM节点的操作方法
- 创建 添加 删除 替换
1.创建元素节点 createElement ()
如我们要创建一个li
var ul = document.getElementsByTagName("ul")[0];
var oli = document.createElement("li");
console.log(oli)
createElement
2.2.添加节点 appendChild ()
在指定节点后面添加一个新子节点
// 格式 : 父.appenChild(子)
如我们要把新创建的li放在ul里面
var ul = document.getElementsByTagName("ul")[0];
var oli = document.createElement("li");
ul.appendChild(oli);
appendChild
4. createTextNode()
创建文本节点
var text = document.createTextNode("啦啦啦啦")
console.log(text)
createTextNode
如果我们要将新创建的文本标签放在li里面 然后将li放入ul里面应该怎么写呢?
首先先创建文本节点和标签节点
然后将文本节点放入标签节点
最后将标签节点放入ul
var ul = document.getElementsByTagName("ul")[0];
//首先先创建好节点
var oli = document.createElement("li");
var text = document.createTextNode("啦啦啦啦")
//然后将文本节点放入li
oli.appendChild(text);
//最后将li节点放入ul里面
ul.appendChild(oli)
例
上面的文本节点也可以用innerHtml来进行替代
5.insertBefore(添加节点,位置)
格式 父.insertBefore(添加节点,位置)
6.removeChild()
删除节点 从子节点列表中删除指定节点
如我们要删除第一个li
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var ul = document.getElementsByTagName("ul")[0];
ul.removeChild(ul.childNodes[1])//为什么下标不是0 因为第一个是空格Text
</script>
removeChild
删除节点的第二种写法
var ul = document.getElementsByTagName("ul")[0];
var li = document.getElementsByTagName('li');
li[0].remove();
7.replaceChild(new,old )替换节点
var div = document.getElementsByTagName("div")[0];
var op = document.createElement("p");
op.innerHTML = "新内容"
div.replaceChild(op,div.firstElementChild)
新的写在前面 老的写后面
replaceChild
8.after ()
再给定节点的后面添加节点
9.before()
在给定节点的前面添加节点
三,DOM nodeName nodeValue nodeType
1.nodeName 获取节点名称
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
<script>
var oul = document.getElementsByTagName("ul")[0].childNodes;
for(var i = 0;i<oul.length;i++){
console.log("第"+(i+1)+"节点名称"+oul[i].nodeName);
}
nodeName
因为是childNodes 所以一共是7个节点
元素节点的nodeName就是标签名
属性节点的nodeName就是属性名称
文本节点的nodeName永远是#text
文档节点的nodeName永远是#document
2.nodeValue 获取节点内容
var oul = document.getElementsByTagName("ul")[0].childNodes;
for(var i = 0;i<oul.length;i++){
console.log("第"+(i+1)+"节点名称"+oul[i].nodeValue);
}
nodeValue
元素节点的nodeValue是undefined或null
文本节点的nodeValue是文本自身
属性节点的nodeValue是属性值
3.nodeType 节点类型
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
<script>
var oul = document.getElementsByTagName("ul")[0].childNodes;
for(var i = 0;i<oul.length;i++){
console.log("第"+(i+1)+"节点名称"+oul[i].nodeType);
}
nodeType
元素节点的类型时 1
属性节点是 2
文本节点 3
文档节点 9
注释节点是 8
