Javascript — DOM模型案例

最新推荐文章于 2022-11-10 23:29:35 发布
最新推荐文章于 2022-11-10 23:29:35 发布
阅读量200 收藏
点赞数 1
分类专栏： JS 文章标签： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42436355/article/details/81546184
版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script type="text/javascript">
    //    function getPwd(){
    //        var pwd=document.getElementById("pwd");
    //        //alert(pwd.value);
    //        var pc=document.getElementById("showPwd");
    //        pc.innerHTML=pwd.value;
    //    }
    //    function getUsers(){
    //        var users=document.getElementsByName("users");
    //        //alert(users.length);
    //        for (var i = 0; i < users.length; i++) {
    //            alert(users[i].value);
    //        }
    //    }
    //    function getInput(){
    //        var is=document.getElementsByTagName("input");
    //        for(var i=0;i<is.length;i++){
    //            alert(is[i].value);
    //        }
    //    }
        //function getAllH1(){
        //    var ah=document.getElementsByTagName("h1");
        //    for(var i=0;i<ah.length;i++){
        //    alert(ah[i].innerHTML);//获取节点的内容
        //    alert(ah[i].nodeName);//获取节点的名称
        //    alert(ah[i].nodeType);//获取节点的类型
        //    alert(ah[i].nodevalue);//获取节点中的值：节点中的值只是在针对文本节点有用
        //    alert(ah[i].firstChild.nodeType);//获取某个节点的文本节点
        //    alert("|"+ah[i].firstChild.nodeValue+"|");//获取某个文本节点的值，IE和火狐对于空格的定义不一样。所以在获取文本的值的时候要把空格去掉
        //    }
    //    }
        function getConH2(){
            var con=document.getElementById("content");
            var h2=con.getElementsByTagName("h2");//得到的h2是一个数组
            alert(h2[0].innerHTML);
            var pn=h2[0].parentNode;
            var h3=pn.getElementsByTagName("h3")[0];
            var s=h3.getElementsByTagName("span")[0];
            alert(s.innerHTML);

        }


    </script>
</head>
<body>
    <div id="content">
        <h1>
            aaa
            <span>AAA</span>
        </h1>
        <h2>
            aaa
            <span>bbb</span>
        </h2>
        <h3>
            aaa
            <span>ccc</span>
        </h3>
        <input type="button" value="获取所有的h1" οnclick="getAllH1()">
        <input type="button" value="获取content的h2" οnclick="getConH2()">
    </div>
    <input type="text" name="users"/>
    <input type="text" name="users"/>
    <input type="text" name="users"/>
    <input type="text" name="users"/>
    <input type="text" name="users"/>
    <innpt type="text" name="users"/>
    <br/>
    <input type="password" id="pwd"/>
    <br/>
    <input type="button" value="获取user" οnclick="getUsers()"/>
    <input type="button" value="获取Pud"  οnclick="getPwd()"/>
    <input type="button" value="获取Input" οnclick="getInput()"/>
    <br/>
    <div id="showPwd"></div>
</body>
</html>

总会吃到鸡的
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM(文档对象模型)
m0_68870440的博客
06-23 1774
DOM(文档对象模型)
DOM模型
WYG2020的博客
02-09 1628
一、DOM模型概述 HTML文档只有一个根节点，而其他节点以根节点子节点或孙子节点的形式存在。最终形成一个结构化文档。DOM模型则用于导航、访问结构化文档的节点，并提供新增，修改，删除结构化本档的能力。 DOM并不是一种技术，它只是访问结构化文档（主要是XML文档和HTML文档）的一种思想。DOM解析器的作用就是完成结构化文档和DOM树之间的转换关系。通常来说，DOM解析器解析结构化文档就是将磁盘...
笔记2017.12.26
o_o_gl的博客
12-26 330
DOM和DOM节点 1.DOM DOM是Javascript操作网页的接口，全称叫文档对象模型（Document Object Model）。它的作用是将网页转化为一个Javascript对象，从而用Javascript脚本进行各种操作（比如增删元素等）。 2.DOM节点 DOM的最小组成单位就是节点（node）。DOM树就是由不同类型的节点组成。每个节点可以看成是DOM树上的叶子
DOM——文档对象模型
最新发布
qq_44700755的博客
11-10 1016
DOM 的概念 • 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本，更新其内容、结构和 www 文档的风格(目前，HTML 和 XML 文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM 是一种基于树的 API 文档，它要求在处理过程中整个文档都表示在存储器中。 DOM 树 • DOM 又称为文档树模型 • -
DOM模型概述
shelaine
02-27 186
自从W3C建立了DOM标准 (W3C DOM)之后，以及DOM和浏览器兼容之后，DOM在实际应用中越来越广泛。 DOM是Document Object Model的简称，中文名称为文档对象模型。它的主要作用是建立网页与 Script 或程序语言沟通的桥梁。 我们平时可操作及建立文件的属性、方法及事件都以并且用“对象”来展现（例如，document 就代表“文件本身”这个对象，...
DOM模型和事件
xiaoyu_alive的博客
01-26 1648
讲述了JavaScript中DOM模型和事件的相关知识点。
DOM(文档对象模型）
liu258159的博客
06-24 1741
DOM(文档对象模型）
dom模型介绍
你好牛蛙！
10-02 2814
dom全称：Document Object Model模型 即：就是把文档中的标签，属性，文本，转换为对象来管理。(这里文档指的是html中的代码文档) 我们可以实现把标签，属性，文本转换为对象来管理。 Document对象 表示整个html代码页面 document对象的理解 1.document它管理了所有的html文档内容 2.document它是一种树形文档，有层次关系 3.它让我们把所有的标签都对象化(类似于用类记录标签的信息，叫标签的对象化)如下例子 这里Dom类表示标签类 上面"父亲"那一
JavaScript高级程序设计 第十四章---DOM 文档对象模型
weixin_40794404的博客
09-03 1131
第十四章 本章内容 理解文档对象模型（DOM）的构成 节点类型 浏览器兼容性 MutationObserver 接口 文档对象模型（DOM，Document Object Model）是HTML 和XML 文档的编程接口。DOM 表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。脱胎于网景和微软早期的动态HTML（DHTML，Dynamic HTML），DOM 现在是真正跨平台、语言无关的表示和操作网页的方式。 14.1 节点层级 任何HTML 或XML 文档都可以用DOM表示
尚硅谷JavaWeb笔记——Dom模型（一文读懂什么是Dom模型）
weixin_43725818的博客
02-26 836
文章目录DOM模型document对象中对应的方法getelementById正则表达式getElementByNamegetElementByTagName查询方法小结createElement创建节点对象额外说明 DOM模型 dom全称是Document Object Model 文档对象模型——将文档中的标签，属性，文本转换成对象来管理（注意，这里文本信息也是一个节点） html的双标签构成的嵌套结构如同一棵多叉树，外层元素就是父亲节点，内层节点就是儿子节点，html的文档树哪层结构如下图所示：其中每
DOM对象模型
07-09
DOM对象模型(PDF)
JavaScript之DOM模型
Cavewang的博客
09-07 277
JavaScript之DOM模型DOM模型document对象document对象常用方法查找HTML元素常用方法修改HTML内容和属性修改HTML元素的CSSHTML DOM元素（节点）创建新的HTML元素替换HTML元素-replaceChild()删除元素-removeChild() DOM模型 通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 DOM:Document Object Model,文档对象模型。 当网页被加载时，浏览器会创建页面的文档对象模型。 HTML
JavaScript DOM对象
fagdg的博客
04-24 1579
一、DOM树中的节点类型和节点关系 1、节点类型 1、元素节点 1 2、属性节点 2 3、文本节点 3 2、节点关系 父子关系和同级关系 二、W3C规定的三类DOM标准接口 1、Core DOM(核心DOM)，适用于各种结构化文档 2、XML DOM，专用于XML文档 ...
DOM 模型概述
JiangJunDriver的博客
01-04 3419
基本概念DOMDOM是JavaScript操作网页的接口，全称为”文档对象模型”(Doucment Object Model)。它的作用是将网页装换为一个JavaScript对象，从而可以用脚本进行各种操作。浏览器会根据DOM模型，将结构化文档(比如HTML和XML)解析成一系列节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。所以，DOM可以理
【JS小知识】DOM实例
因为遇见你，我，三生有幸呀
02-15 180
DOM的定义：全称为Document Object Model，即文档对象模型。它是一套用来管理控制html文档的规则。 /** * 节点：构成HTML文档最基本的单元 * 常用节点分为四类 * - 文档节点：整个HTML节点 * - 元素节点：HTML文档中的HTML标签 * - 属性节点：元素的属性 * - 文本节点：HTML标签中的文本内容 * * 浏览器已经为我们提供 文档节点 对象，这个对象是window属性 * 可以在页面中直接使用，文档节点代...
学习DOM模型-childNodes()案例教程
傻丁鱼的博客
11-27 215
&lt;!DOCTYPE&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;childNodes&lt;/title&gt; &lt;script language="javascript"&gt; function myDOMInspector(){ //文档的DOM结构必须是在整个文档加载完毕后才能正确分析出来，因此放在函数内，页面加载完成后才用&am
了解DOM模型
owen_william的博客
04-07 1478
1. 概述 DOM不是一门什么技术，可以说它只是提供访问结构化文档的一种方式，主要是XML文档和HTML文档。基于这种思想，各种语言都有自己的DOM解析器。DOM解析器的作用就是完成结构化文档和DOM树之间的转换关系。通常来说，DOM解析器解析结构化文档，就是将磁盘的结构化文档转换成内存中的DOM树；而从DOM树解析出结构化文档，就是将内存中的DOM树转换成磁盘上的结构化文档。如下图的关系：

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值