JavaScript中的DOM操作

最新推荐文章于 2023-03-27 20:41:16 发布

Code_dcy

最新推荐文章于 2023-03-27 20:41:16 发布

阅读量262

点赞数 1

分类专栏： JavaScript 文章标签： html dom js javascript web前端

本文链接：https://blog.csdn.net/qq_34825292/article/details/75305509

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Dom操作
a)将html元素建立一棵树，如：

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

i.根结点为<html>
ii.<html>的第一个孩子节点firstChild为<head> ,最后一个孩子节点lastChild为<body>，<html>是<head>,<body>的父节点parentNode，<title>是<head>的孩子节点，<head>是<title>的父节点。
iii.<head>与<body>为兄弟节点关系sibling,<body>是<head>的nextSibling.

b) 获取某个元素的父节点，如获取div的父节点：div.parentNode
c) 获取某个元素的第一个子节点：div.firstChild
d) 获取某个元素的最后一个子节点：div.lastChild
e) 获取某个元素的任意一个子节点：div.childNodes[i] // i是下标从0开始计数。
注意：在获取子元素时，换行符等文本也算是一个子元素，所有很多时候firstChild和lastChild并不好用
f) 获取节点的节点名字：div.nodeName
g) 根据标签名选择元素：getElementsByTagName();``getElementsByTagName(“p”); 选择所有的p标签，返回的是一个数组，通过下标选择具体的元素，如：getElementsByTagName(“p”)[0]; 表示选择所有p标签中的第一个p。
h) 根据class名选择元素：getElementsByClassName();用法基本同上。
i) 创建元素节点：createElement(); 参数写要创建的元素节点名称，如：创建一个span标签：createElement(“span”);
j) 创建文本节点：createTextNode();参数写要创建的文本内容，如：

createTextNode(“一个新文本”);

k) 添加属性节点：setAttribute("id","p1");第一个参数为属性名，第二个参数为对应属性名的属性值。
l) 向元素添加子节点:
appendChild();由父元素引用，参数写节点名,默认插在最后。
insertBefore();由父元素引用，参数有两个，第一个参数是新节点，第二个参数是要插在前面的指定节。
m) 删除子元素：removeChild();由父元素引用，参数是要删除的元素。
n) 替换子元素：replaceChild();由父元素引用，两个参数，第一个参数是新节点，第二个是旧节点。
例：

<body>
        <div id="div">
            <p id="p1">第一个p</p>
            <p id="p2">第二个p</p>
            <p id="p3">第三个p</p>
            <p id="p4">第四个p</p>
        </div>
        <script type="text/javascript">
            var new_p = document.createElement("p");
            var text_p = document.createTextNode("一个新文本");
            var new_button = document.createElement("input");
            var text_replace = document.createTextNode("替换文本");
            new_button.setAttribute("type","button");
            new_button.setAttribute("value","new_button");
            new_p.setAttribute("style","font-size: 15pt;color: red;");
            new_p.appendChild(text_p);
            var div = document.getElementById("div");
            var p1 = document.getElementById("p1");
            div.removeChild(document.getElementById("p3"));
            var child = document.getElementById("p1").childNodes[0];
            p1.replaceChild(text_replace,child);
            div.appendChild(new_p);
            div.insertBefore(new_button,document.getElementById("p2"));
        </script>
    </body>

初始效果图：这里写图片描述 dom操作后效果图：
o) options操作，对下拉框的操作：var select_test = document.getElementById(“select”);

    I.  新增项目：select_test.options.add(new Option("西瓜","watermelon"),2);
            options为js封装好的一个对象，add方法参数有两个，第一个是    要加的新option，第二个是添加的位置（下标）。
    II. 删除项目：select_test.options[select_test.options.selectedIndex].remove();
      select_test.options.selectedIndex表示当前被选中的option的下标。
      在表示特定的option时可以直接在options后增加[下标]。
    III.    替换操作：select_test.options[select_test.options.selectedIndex] = new Option("芒果","mango");
    IV. 清空列表：select_test.length=0;
    V.  获取下拉框长度：alert(select_test.length);
    VI. 将下拉框中的option的纯文本输出：select_test.options[i].text;
    VII.    输出某个option的value值：select_test.options[i].value;

Code_dcy

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中的DOM操作

Dom操作 a)将html元素建立一棵树，如：<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body></html>i.根结点为<html>ii.<html>的第一个孩子节点firstChild为<head> ,最后一个孩子节点lastC
复制链接

扫一扫