JavaScript第三章节点知识点简介

最新推荐文章于 2024-05-17 13:52:13 发布

Pirate 船长

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量198

点赞数 1

文章标签： javascript 1024程序员节

本文链接：https://blog.csdn.net/weixin_54259919/article/details/120818430

版权

方法名 (元素.)	说明
操作子父兄级元素：
`parentNode`	获取离元素最近的父节点找不到返回null
`childNodes`	返回节点的子节点集合
children	获取离元素最近的所有子元素节点
firstChild	获取第一个子节点找不到返回null
lastChild	获取最后一个子节点找不到返回null
firstElementChild	返回第一个子元素节点
lastElementChild	返回最后一个子元素节点
nextSibling	下一个兄弟节点
previousSibling	上一个兄弟节点
nextElementSibling	下一个兄弟元素节点
previousElementSibling	上一个兄弟元素节点
高级方法：
var li = document.createElement('li')	创建节点元素节点
node.appendChild('child')	后面插入/添加节点 node 父集 child 子集
	可累计在后面添加类似于数组的push添加方式
node.insertBefore(child,指定节点)	指定节点前面插入/添加节点 node 父集 child 子集
	ul.insertBefore(lili,ul.children[0])
node.cloneNode(boolean)	复制节点，
	括号为空或false 浅拷贝只复制节点不复制内容括号为true 复制节点同时复制内容
node.removeChild(child)	删除节点
父集节点.replaceChild(新节点，被替换的节点)	替换节点

下面放一篇替换节点

<body>
<input type="button" value="替换" onclick="replaceNode()">
<input type="button" value="删除" onclick="deleteNode()">
<input type="button" value="创建" onclick="createNode()">

<img src="images/one1.jpg"  height="192" width="96" id="img"/>
<h1 id="use">52</h1>
<script type="text/javascript">
    var tous=["two2.jpg","one1.jpg"];
    var names=["52","胡子阳"];

    function replaceNode(){
        //1:找到要被替换的元素
        let oldImg = document.getElementById("img");
        let oldUse = document.getElementById("use");
        //2.创建新的元素
        let newImg = document.createElement("img");
        let newH1 = document.createElement("h1");
        let index= Math.floor(Math.random()*(tous.length))
        newImg.setAttribute("src","img/"+tous[index])
        newImg.setAttribute("id","img")
        newH1.innerHTML=use[index];
        newH1.setAttribute("id","use")
        //3.替换
        oldImg.parentNode.replaceChild(newImg,oldImg)
        oldUse.parentNode.replaceChild(newH1,oldUse);
    }
    function deleteNode() {

    }
    function createNode() {

    }
</script>
</body>

图片可以自行上传，有需要的可以加一下内部样式，调整一下图片大小，以便影响美观

Pirate 船长

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript第三章节点知识点简介

JavaScript第三章节点知识点简介方法名 (元素.) 说明操作子父兄级元素： parentNode 获取离元素最近的父节点找不到返回null childNodes 返回节点的子节点集合 children 获取离元素最近的所有子元素节点 firstChild 获取第一个子节点找不到返回null lastChild 获取最后一个子节点找不到返回null firstElementChild 返回第一个子元素节点...
复制链接

扫一扫