网页制作之DOM操作篇

最新推荐文章于 2024-07-17 19:09:25 发布
最新推荐文章于 2024-07-17 19:09:25 发布
阅读量712 收藏 2
点赞数
分类专栏： 网页制作 文章标签： dom javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zuefeng/article/details/107708652
版权

  1. 找到标签

     	a.  直接查找
    document.getElementById("i1")           ID
    document.getElementByTagName("div")     标签名
    document.getElementByName("div")        name
    document.getElementByClassName("div")   类
    b.  间接查找
    tag = document.getElementById("i1")
    tag.parentElement                       查找该标签的父标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id="name">
    <input type="button" οnclick="GetData()" value="提交">
    <script>
        function GetData() {
            var i = document.getElementById(id="name")
            alert(i.value)
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .mainm{
            background-color: #382eff;
        }
        .mainm .con{
            background-color: white;
            /*display: none;*/
        }
    </style>
</head>
<body>
    <div>
        <div id="t1" class="mainm" οnclick="ShowT('t1')">菜单1
            <div class="con">内容1</div>
            <div class="con">内容1</div>
            <div class="con">内容1</div>
        </div>
        <div id="t2" class="mainm" οnclick="ShowT('t2')">菜单2
            <div class="con">内容2</div>
            <div class="con">内容2</div>
            <div class="con">内容2</div>
        </div>
        <div id="t3" class="mainm" οnclick="ShowT('t3')">菜单3
            <div class="con">内容3</div>
            <div class="con">内容3</div>
            <div class="con">内容3</div>
        </div>
        <div id="t4" class="mainm" οnclick="ShowT('t4')">菜单4
            <div class="con">内容4</div>
            <div class="con">内容4</div>
            <div class="con">内容4</div>
        </div>
    </div>
    <script>
        function ShowT(nid) {
            var cur_tag = document.getElementById(nid)
            var tag_list = cur_tag.parentElement.children
            for(var i=0;i<tag_list.length;i++){
                for(var j=0;j<tag_list[i].children.length;j++){
                    tag_list[i].children[j].classList.add("hide")
                }
            }
            for(var n=0;n<cur_tag.children.length;n++){
                cur_tag.children[n].classList.remove("hide")
            }
        }
    </script>
</body>
</html>

  1. 标签操作

        a.  innerText(仅文本)
    tmp = label.innerText                   获取标签的值
    label.innerText = "Hello"               修改标签的值
    b.  className
    tag = document.getElementById("i1")
    tag.className = "c1"                    直接完整的改变样式为c1
    tag.classList.jadd("c2")                 添加样式c2
    tag.classList.remove("c2")              删除样式c2

  2. 文本内容操作

         innertext   仅文本
     innerHTML   全内容
     value
         input   value获取当前标签中的值
         select  获取选中的value值（selectedIndex）
         textarea    value获取当前标签的value值
         搜索框的实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width:600px;margin: 0 auto;">
        <input id="i1" οnfοcus="Focus()" οnblur="Blur()" type="text" value="请输入关键字"/>
        <input placeholder="请输入关键字"/>
    </div>
    <script>
        function Focus() {
            var tag=document.getElementById("i1");
            var val=tag.value;
            if(val=="请输入关键字"){
                tag.value = "";
            }
        }
        function Blur() {
            var tag = document.getElementById("i1");
            var  val = tag.value;
            if (val==""){
                tag.value = "请输入关键字";
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <p id="show"></p>
<!--        <input id="status" type="text" />-->
        <input type="button" οnclick="Delete()" value="删除">
    </div>
    <script>
        function Delete() {
            var tag = document.getElementById("show");
            tag.innerText="已删除";
            setTimeout(function () {
                tag.innerText="";
            },3000);
        }
    </script>
</body>
</html>

  1. 样式操作

         对象操作
         tag.className
         tag.classList
     细节操作
         tag.style.color="red";
         tag.style.backgroundColor="red";
         tag.style.fontSize="18px";

<!DOCTYPE html>
<!--DOM1-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1px" width="300px">
        <tr οnmοuseοver="Over(0)" οnmοuseοut="Out(0)"><td>1</td><td>2</td><td>3</td></tr>
        <tr οnmοuseοver="Over(1)" οnmοuseοut="Out(1)"><td>1</td><td>2</td><td>3</td></tr>
        <tr οnmοuseοver="Over(2)" οnmοuseοut="Out(2)"><td>1</td><td>2</td><td>3</td></tr>
    </table>
    <script>
        function Over(n) {
            var tag = document.getElementsByTagName("tr");
            tag[n].style.backgroundColor="red";
        }
        function Out(n) {
            var tag = document.getElementsByTagName("tr");
            tag[n].style.backgroundColor="";
        }
    </script>
</body>
</html>

  1. 属性操作

         attributes
     getAttributes
     setAttributes

  2. 创建标签，并添加到HTML中

         a.  字符串形式
     b.  对象的方式
         document.createElement("input")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i1">
        <input type="button" οnclick="AddEle()" value="+" />
        <input type="button" οnclick="AddElement()" value="+" />
        <input type="text" />
    </div>
    <script>
        function AddEle() {
            var tag="<p><input type='text' /></p>";
            document.getElementById("i1").insertAdjacentHTML("beforeend",tag);
        }
        function AddElement() {
            var input = document.createElement("input");
            input.setAttribute("type","text");
            input.style.color = "red";
            input.style.fontSize = "22px";
            var p = document.createElement("p");
            p.appendChild(input);
            document.getElementById("i1").appendChild(p);
        }
    </script>
</body>
</html>

  1. 提交表单

         任何标签都可以通过dom中的submit进行表单的提交
     document.getElementById("form").submit()

  2. 其它

        location.href                       获取当前地址
    location.href = location.href       页面刷新
    location.reload()
    location.href = "url"               重定向，跳转

    var obj=setInterval(function(){     创建定时器obj
            console.log(1);
        },2000);
    clearInterval(obj)                  清除定时器obj
    var Tim = setTimeout(func,2000)     2秒后执行func
    clearTimeout(Tim)                   清除定时操作

  3. 事件

        onclick,onblur,onfocus
    行为  样式  结构   相分离的页面？
    JS    CSS  HTML

    绑定事件：
        a   直接标签绑定
        b   现获取dom对象，然后在JS进行绑定

    this 当前触发事件的标签：
        a   第一种绑定方式
            <input id="i1" type="button" onclick="ClickOn(this)"
            function ClickOn(self){
                //self    当前点击的标签
            }
        b   第二种绑定方式
            tag.onclick=function(){
                //this代指当前点击的标签
                this.style.color="red";
            }
        c   第三种绑定方式
            tag.addEventListener("click",function(){
                console.log("aaa");
            },false);
            // 第一个参数表示标签要添加的事件名，第二个参数表示相应事件，
            // 第三个参数表示的是添加事件的顺序：true 捕捉 从下往上添加
            //                             false 冒泡 从上往下添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i1">
        点我
    </div>
    <script>
        var tag = document.getElementById("i1");
        tag.addEventListener("click",function () {
            console.log("aaa");
        },false);
        tag.addEventListener("click",function () {
            console.log("bbb");
        },false);
    </script>
</body>
</html>

        active object=====> AO
            1.形式参数
            2.局部变量
            3.函数声明表达式

            1.形式参数
                AO.age=undefined
                AO.age=3
            2.局部变量
                AO.age=undefined
            3.函数声明表达式
                AO.age=function

            <script>
                function t1(age) {
                    console.log(age);   // function 由于function的优先级最高，直接替代了实参的传递
                    var age = 27;
                    console.log(age);   // 27
                    function age() {};
                    console.log(age)    // 27
                }
                t1(3);
            </script>

<!DOCTYPE html>
<!--DOM1-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1px" width="300px">
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
    </table>
    <script>
        var tag = document.getElementsByTagName("tr");
        var len = tag.length
        for (var i=0;i<len;i++){
            tag[i].οnmοuseοver=function () {
                this.style.backgroundColor="red";
            }
            tag[i].οnmοuseοut=function () {
                this.style.backgroundColor="";
            }
        }
    </script>
</body>
</html>
Xue__Feng
关注
专栏目录
DOM操作
qq_53566222的博客
07-14 2179
DOM是当网页被加载时，浏览器会创建页面的文档对象模型（DocumentObjectModel）。把文档中的代码翻译成一个对象模型在这个模型中所有相关的标签属性注释文本等等12种数据都翻译为一种类型的对象统称节点对象这些对象之间在文档模型数据结构中存在某种关系根节点父子节点同胞节点等等1.只有一个根节点document2.除了根节点外所有节点都有唯一的一个父节点3.document是window对象的属性。............
jQuery中DOM树操作之复制元素的方法
10-24
总的来说，jQuery中的`.clone()`方法是DOM操作中不可或缺的一部分，它提供了高效且灵活的方式来复制和操纵页面元素，包括事件和样式的复制。通过理解`.clone()`的使用方法及其与插入方法的配合，开发者可以更有效地...
第二章DOM数字产品制作技术
07-30
第二章DOM数字产品制作技术，周立，共89p ,第二章DOM数字产品制作技术.pdf
网页的dom
liumengyan_ysu的专栏
05-20 586
dom 全称是Document Object Model，即文档对象模型，表示文档内容的结构关系，对html和xml有访问控制能力，可以操作网页的html和xml，利用dom可以添加修改html和XML元素，DOM中有很重要的方法如：getElementById getElementsByTagName offsetParent appendChild getAttribute HTML中D
DOM概述
最新发布
ChangUng的博客
07-17 971
JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。简单理解：触发--- 响应机制。网页中的每个元素都可以产生某些可以触发 JavaScript 的事件。例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。简单举个例子：点击按钮的时候就会出现这个一个浏览器弹出框自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和。
响应式网页设计之DOM对象
GSCY
06-02 318
DOM对象一、认识DOM1.什么是DOM二、Node节点1.初识Node节点2.访问Node节点3.访问节点的属性 补充：文章中所有的代码都是写在html文件中，JS代码需要用< script >< /script >标签包起来。 一、认识DOM 1.什么是DOM 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 示例：DOM树 <html> <head> <title>这是标题</titl
09、JavaScript-DOM获取元素及修改属性
执手天涯@的博客
01-13 1101
1、Web Api基本认识 【作用】： 使用JavaScript去操作html和浏览器 【分类】： DOM ：文档对象模型 BOM ：浏览器对象模型 JavaScript结构图： 【什么是DOM】： DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API 【DOM树】： 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树 DOM对象： 浏览器根据html标签生成的 JS对象。 所有的标签属性都可以在这个
jQuery 选择器、DOM操作、事件、动画
12-03
本篇文章将深入探讨jQuery中的选择器、DOM操作、事件以及动画。 ### jQuery选择器 jQuery的选择器允许开发者高效地选取DOM元素，类似于CSS选择器。 1. **基本选择器**： - `$("#test")` 选择ID为`test`的元素。 ...
ExtJS DOM元素操作经验分享
01-21
记得最早刚接触网页操作DOM元素的时候是做毕业设计的时候，用JQuery操作的。毕业工作后是从事C++方面的编程，两年后，又重新解决了网页编程，不过这次不是用JQuery了，用的是ExtJS。就我经验来看，程序员是一个需要...
JS原生系列-DOM篇.pdf
09-27
DOM操作是Web开发中的一项基础技能，它使得网页的行为和内容可以动态地被控制和修改。通过熟练掌握DOM的各种方法和事件，可以大大增强网页的交互性和用户体验。在实际开发过程中，需要根据具体的应用场景选择合适的...
DOM制作流程，pdf格式。希望对大家有所帮助。
06-07
讲解了dom制作的一般流程及其它事项。pdf格式。希望对大家有所帮助。这对于准备学习或想学习dom制作的朋友是个参考。
HTML DOM基础教程（网页形式）
01-15
HTML DOM DOM 首页 DOM 简介 DOM 节点 DOM 节点树 DOM 节点访问 DOM 节点信息 DOM How To DOM 参考 DOM 总结 DOM 实例 DOM 实例 DOM 对象 DOM Window DOM Navigator DOM Screen DOM History DOM Location DOM Document DOM Anchor DOM Area DOM Base DOM Body DOM Button DOM Event DOM Form DOM Frame DOM Frameset DOM IFrame DOM Image DOM Input Button DOM Input Checkbox DOM Input File DOM Input Hidden DOM Input Password DOM Input Radio DOM Input Reset DOM Input Submit DOM Input Text DOM Link DOM Meta DOM Object DOM Option DOM Select DOM Style DOM Table DOM TableCell DOM TableRow DOM Textarea
DOM制作流程
Gothic的专栏
03-31 7494
 DOM制作流程项目基本结束，这个是其中系统裁减的一个总结文档，不知道有没有人感兴趣：) ============================================= 前言: 为了完成用户的需求，需制作一个完整的环境供AP运行，且存在一些约束条件。 关键字： DOM Kernel Busybox X-Window Window-Manager Interbase nvi
可视化讲解 DOM 构建过程
weixin_33769207的博客
07-10 174
前言 最近在看 Secrets of the JavaScript Ninja, 书中第二章讲到 DOM 的构建流程. 记得我之前也为理解 DOM 构建流程查阅过数次资料, 虽然每次查阅完都觉得 DOM 构建流程很简单, 看完便懂, 但是懂了又忘还是让人有些头疼. 为了给自己加深印象, 也为了为大家提供一个可视化的理解 DOM 构建过程的方式, 笔者制作了一个简单的网页来动态演示 DOM 构建过程...
响应式网页设计之操作DOM
GSCY
06-09 213
操作DOM 补充：文章中所有的代码都是写在html文件中，JS代码需要用< script >< /script >标签包起来。 文章目录操作DOM一、DOM元素特性二、table对象二、使用步骤1.引入库2.读入数据总结 一、DOM元素特性 element.attributes：返回元素的所有特性 element.setAttribute(name,value)：设置元素的指定特性 element.getAttribute(name)：获取元素的指定特性 element.rem
[网页设计]HTML DOM（学习笔记一）
01-29 119
嗯，工作也有一段时间了，对编程的认识也深入了一些，以前认为HTML/CSS/JAVASCRIPT是比较简单的，看网上的教程就可以了，W3C 是我学习这些知识常去的一个网站，非常感谢她让我学习到了更多的一些关于前端的知识，不过现在我不这样看了，前端工程师们最主要的就是通过这些来工作的 （当然考虑的问题肯定是更多更广更深入了，架构问题、兼容性问题、性能问题、还有各种插件、JS库以及前段的各种...
HTML DOM（学习笔记二）
weixin_33816611的博客
01-25 95
嗯，在HTML DOM（学习笔记一）中简单描述了一下HTML DOM 是什么，这一篇将记录下来有关HTML DOM的内容！ 1：DOM节点 首先，再来看一下HTML DOM的树状结构，如下图所示： 这就是我们要处理的HTML DOM 也就是一种HTML文档的另一种表现的形式，更加接近我们的HTML文档的表现形式的样式是这样的，如下图所示： 在HTML DOM中，所有的事物都是节点。...
获取网页中的dom对象
taiguolaotu的博客
08-27 675
每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。 提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。 在springboot项目中，为大家举个例子。 添加依赖 <!--jsoup解析html文件,获取dom树--> ...
深入解析DOM操作的鲜为人知技巧：javascript篇
本文将深入探讨你可能尚未...通过理解这些DOM操作的细节，开发者能更高效地控制网页内容，实现动态交互和响应式设计。无论是处理用户输入、修改页面布局还是应用CSS样式，熟练掌握DOM操作都是Web开发中至关重要的技能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值