复习篇之JS DOM节点

最新推荐文章于 2022-11-17 02:32:00 发布

杨三岁.

最新推荐文章于 2022-11-17 02:32:00 发布

阅读量150

点赞数

分类专栏： JavaScript 文章标签：复习

本文链接：https://blog.csdn.net/qq_40720991/article/details/82227916

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

复习篇之JS DOM节点

参考：菜鸟教程
 https://www.cnblogs.com/libin-1/p/7086804.html

例子：
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    window.onload=function(){
    var p2=document.createElement("p");
    var node=document.createTextNode("这是第二个段落");
    p2.appendChild(node);

    var element=document.getElementById("div1");
    element.appendChild(p2);
    }
    </script>
</head>
<body>
    <div id="div1">
        <p id="p1">这是一个段落</p>
    </div>
</body>
</html>

在这个例子中我们需要注意的是：在head标签中实现js的话，最好是用一个window.οnlοad=function(){}进行包裹，否则的话，可能放在head标签中没有起到任何的效果，这是因为文档还没有加载就已经读了js,js就起不了作用了。如果在body标签内实现js没任何影响。

创建元素节点

**语法：appendChild(newnode);**

由上述例子可知：
创建元素节点：createElement

document.createElement(“标签名”); //创建p标签

创建文本节点：createTextNode

document.createTextNode(“文本”); //创建文本

将文本提交给创建的标签中：appendChild()

appendChild(); //方法向节点添加最后一个子节点。也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。用法：a.appendChild(b)，把b添加到a内。

查找已存在的元素：getElementById

document.getElementById(“元素便签名”);

添加元素节点

1.appendChild();

在指定节点的最后一个子节点列表之后添加一个新的子节点。它用于添加新元素到尾部。

2.insertBefore();

在已有的子节点前插入一个新的子节点。将新元素添加到开始位置。

语法：insertBefore(newChild, refChild);

例子：
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    window.onload=function(){
    var p2=document.createElement("p");
    var node=document.createTextNode("这是第二个段落");
    p2.appendChild(node);

    var element=document.getElementById("div1");
    var child=document.getElementById("p1");
    element.insertBefore(p2, child);
    }
    </script>
</head>
<body>
    <div id="div1">
        <p id="p1">这是一个段落</p>
    </div>
</body>
</html>

删除节点元素

removeChild(node)

要移除一个元素，你需要知道该元素的父元素。

例子：
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    window.onload=function(){
    var parent=document.getElementById("div1");
    var child=document.getElementById("p1");
    parent.removeChild(child);
    }
    </script>
</head>
<body>
    <div id="div1">
        <p id="p1">这是一个段落</p>
        <p id="p2">这是第二个段落</p>
    </div>
</body>
</html>

替换元素节点

replaceChild()

把一个给定父元素里面的一个子节点替换为另一个子节点。替换 HTML DOM 中的元素。

例子：
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    window.onload=function(){
    var p2=document.createElement("p");
    var node=document.createTextNode("这是新的段落");
    p2.appendChild(node);

    var element=document.getElementById("div1");
    var child=document.getElementById("p1");
    element.replaceChild(p2, child);
    }
    </script>
</head>
<body>
    <div id="div1">
        <p id="p1">这是一个段落</p>
        <p id="p2">这是第二个段落</p>
    </div>
</body>
</html>

该例中把p1替换为一个新的节点标签。

JS HTML DOM 集合(Collection)

HTMLCollection 对象

getElementsByTagName() 方法返回 HTMLCollection 对象。

<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>Hello World!</p>
<p>Hello Runoob!</p>
<p id="demo"></p>
<script>
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = "第二个段落的内容为:<span style='color:red;'> " + myCollection[1].innerHTML + '</span>';
</script>
</body>
</html>

结果为：
Hello World!

Hello Runoob!

第二个段落的内容为: Hello Runoob!

通过getElement的方法

document.getElementById();//id
document.getElementsByTagName(); //标签名；Elements加了S，选出来是类数组；
document.getElementsByName(); //name属性，部分标签可以；Elements加了S，选出来是类数组；
document.getElementsByClassName(); //class；Elements加了S，选出来是类数组；IE9以下不支持；

document代表整个文档
ById是获取一个元素节点；
ByTagName,ByName,ByClassName 获取的是类数组；

杨三岁.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录