初学js4_js的bom和dom_学习笔记

最新推荐文章于 2024-04-17 07:32:31 发布
最新推荐文章于 2024-04-17 07:32:31 发布
阅读量235 收藏 2
点赞数
分类专栏： html+css+js 文章标签： js的bom和dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zoweiccc/article/details/80198434
版权

强行推一推博文~

js04.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
js的bom
        window对象
            弹框的方法
                alert("提示信息");      提示框
                    没有返回值
                confirm("确认信息");    确认框
                    有返回值，点击确认则返回true,取消则为false
                    <script type="text/javascript">
                        var res =confirm("确认要删除？");
                        alert(res);
                    </script>
                prompt("提示信息");     输入框
                    有返回值，当点击确定时，返回值是输入框的文本，点击取消，则返回null
                    <script type="text/javascript">
                        var pro=prompt("请输入密码");
                        alert(pro);
                    </script>
            open方法：
                window.open("url地址");
                    <script type="text/javascript">
                        open("js02.html");
                    </script>
            定时器：
                setTimeout(函数,毫秒值);     在某个毫秒值之后执行这个函数
                    <script type="text/javascript">
                        setTimeout(
                                function(){
                                 alert("xxx");
                                },3000);
                    </script>
                clearTimeout(定时器的名称);   清除定时器
                    <script type="text/javascript">
                        var Timer;
                        var fn= function () {
                            alert("x");
                                Timer=setTimeout(fn,2000);
                        }
                        var close=function(){
                            clearTimeout(Timer);
                        }
                        fn();
                    </script>
                    <input type="button" value="button" οnclick="close()"/>
                setInterval(函数，毫秒值);
                clearInterval(定时器的名称);
                    <script type="text/javascript">
                        var Timer1=setInterval(function(){
                                        alert("hello");
                                    },2000);
                        var closer=function(){
                            clearInterval(Timer1);
                        }
                    </script>
            eg:注册后五秒钟跳转首页
                    <script>
                        var time=5;
                        var Timer2
                        Timer2=setInterval(function (){
                        var second=document.getElementById("second");
                                if(time>=1){
                                    second.innerHTML=time;
                                    time--;
                                }else{
                                    clearInterval(Timer2);
                                    location.href="js02.html";
                                }
                    },1000
                    )
                    </script>
                    恭喜您注册成功， <span id="second" style="color: red;">5</span> 秒跳回首页，如果失败，请点击 <a href="js02.html"></a>
        location
            location.href="url地址";
        history     历史对象
            back();     forward();      go();
                <a href="js03.html">后一页</a>
                <input type="button" value="上一页" οnclick="history.back()"/>
                <input type="button" value="下一页" οnclick="history.forward()"/>
                <input type="button" value="上一页" οnclick="history.go(-1)"/>
                <input type="button" value="下一页" οnclick="history.go(1)"/>


js的dom
        文档对象模型：
        html文件加载到内存之后会形成一颗dom树，根据这些节点对象可以进行脚本代码的动态修改
        在dom树当中，一切皆为节点对象

        dom的方法和属性
            getElementById();   返回对拥有指定 id 的第一个对象的引用。
                var inputNode=document.getElementById("tid");
                alert(inputNode.value);
            getElementByName(); 返回带有指定名称的对象集合。
                var inputNodes=document.getElementByName("tname");
                alert(inputNodes.length);

                for(var i=0;i<inputNodes.length;i++){
                    var inputNode=inputNodes[i];
                    alert(inputNode.value);
                }

                for(var i=0;i<inputNodes.length;i++){
                    var inputNode=inputNodes[i];
                    inputNode.οnchange=function(){
                        alert(this.value);
                };
                }
            getElementsByTagName();     返回带有指定标签名的对象集合。
                var inputNodes=document.getElementsByTagName("input");
                alert(inputNodes.length);
                for(var i=0;i<inputNodes.length;i++){
                    var inputNode=inputNodes[i];
                    alert(inputNode.value);
                }

                for(var i=0;i<inputNodes.length;i++){
                    var inputNode=inputNodes[i];
                    if(inputNode.type=="text"){
                        alert(inputNode.value);
                    }
                }

                var optionNodes=document.getElementsByTagName("option");
                for(var i=0;i<optionNodes.length;i++){
                    var optionNode=optionNodes[i];
                    alert(optionNode.value);
                }

                var edu=document.getElementById("edu");
                var optionNodes=edu.getElementsByTagName("option");
                for(var i=0;i<optionNodes.length;i++){
                    var optionNode=optionNodes[i];
                    alert(optionNode.value);
                }

                var btn=document.getElementById("btn");
                btn.οnclick=function(){
                    var optionNodes=document.getElementsByTagName("option");
                    for(var i=0;i<optionNodes.length;i++){
                        var optionNode=optionNodes[i];
                        if(optionNode.selected){
                            alert(optionNode.value);
                        }
                    }
                }

            hasChildNodes();    返回元素是否拥有子节点。
                var edu=document.getElementById("edu");
                alert(edu.hasChildNodes());

                var tid_1=document.getElementById("tid_1");
                alert(tid_1.hasChildNodes());

            nodeName:一个字符串，其内容是给定节点的名字。返回节点的名称，依据其类型。
                var name=node.nodeName;
                如果节点是元素节点，nodeName返回这个元素的名称
                如果是属性节点，nodeName返回这个属性的名称
                如果是文本节点，nodeName返回一个内容为#text的字符串
                是一个只读属性！！
            nodeType:返回一个整数，这个数值代表着给定节点的类型
                Node.ELEMENT_NODE       ---1        --元素节点
                Node.ATTRIBUTE_NODE     ---2        --属性节点
                Node.TEXT_NODE          ---3        --文本节点
                是一个只读属性！！
            nodeValue:返回节点的当前值
                如果节点是元素节点，返回值是null
                如果是属性节点，返回值是属性的值
                如果是文本节点，返回值是这个文本节点的内容
                是一个读写属性！！

                var node=document.getElementById("tid_1");      元素节点
                alert(node.nodeName);
                alert(node.nodeType);
                alert(node.nodeValue);

                var node=document.getElementById("pid");        文本节点
                var textNode=node.firstChild;
                alert(textNode.nodeName);
                alert(textNode.nodeType);
                alert(textNode.nodeValue);

                var node=document.getElementById("pid");        属性节点
                var p=node.getAttributeNode("id");
                alert(p.nodeName);
                alert(p.nodeType);
                alert(p.nodeValue);

                eg:childNodes表示父元素下的所有的子元素(数组)
                    var h1=document.getElementById("h1");
                    var childs=h1.childNodes;
                    alert(childs[0].nodevalue);

            replaceChild();把一个给定父元素里的一个子节点替换为另外一个子节点,相当于剪切
                var bj=document.getElementById("bj");
                var fk=document.getElementById("fk");
                bj.οnclick=function(){
                    var parentNode=this.parentNode;
                    parentNode.replaceChild(fk,this);
                };

            getAttribute();     查找属性值，返回一个给定元素的一个给定属性节点的值
                var xj=document.getElementById("xj");
                alert(xj.getAttribute("value"));

            setAttribute();     将给定元素节点添加一个新的属性值或改变它的现有属性的值 有两个参数
                var xj=document.getElementById("xj");
                xj.setAttribute("name","xingjizhengba");
                alert(xj.getAttribute("name"));         //验证是否能行

            createElement();    创建新元素节点   按照给定的标签名创建一个新的元素节点，只有一个参数，将被创建的元素的名字
            createTextNode();   创建新文本节点       创建一个包含着给定文本的新文本节点
            appendChild();      插入节点            为给定元素增加一个子节点
                var li=document.createElement("li");
                li.setAttribute("id","tj");                 //添加属性
                li.setAttribute("v","tianjin");
                alert(li.getAttribute("id"));               //验证是否能行
                var txt=document.createTextNode("天津");    //添加文本
                li.appendChild(txt);
                var city=document.getElementById("city");
                city.appendChild(li);

            insertBefore();     插入节点，把一个给定节点插入到一个给定元素节点的给点子节点前面
                var li=document.createElement("li");
                li.setAttribute("id","tj");                 //添加属性
                li.setAttribute("v","tianjin");
                alert(li.getAttribute("id"));               //验证是否能行
                var txt=document.createTextNode("天津");    //添加文本
                li.appendChild(txt);
                var ul=document.getElementsByTagName("ul");
                var cq=document.getElementById("cq");
                ul[0].insertBefore(li,cq);

            insertAfter();      插入某个节点后面,dom不提供
                var li=document.createElement("li");
                li.setAttribute("id","tj");                 //添加属性
                li.setAttribute("v","tianjin");
                alert(li.getAttribute("id"));               //验证是否能行
                var txt=document.createTextNode("天津");    //添加文本
                li.appendChild(txt);
                var ul=document.getElementsByTagName("ul");
                var sh=document.getElementById("sh");
                var cq=sh.nextSibling;
                ul[0].insertBefore(li,cq);

            removeChild();      删除节点，从一个给定元素里删除一个子节点
                var city=document.getElementById("city");
                var bj=document.getElementById("bj");
                city.removeChild(bj);

            innerHTML;
                var div=document.getElementById("subject");     使用innerHTML读出id=subject中的文本内容
                alert(div.innerHTML);

                var div=document.getElementById("subject");
                div.innerHTML="<h1>今天</h1>";                   将<h1>今天</h1>写到div的层中
            innerText;
</body>
</html>


zoweiccc
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js笔记整理BOM和DOM，es5和es6
05-09
JavaScript是Web开发中不可或缺的一部分，主要分为两个核心部分：BOM（浏览器对象模型）和DOM（文档对象模型），以及两种版本：ES5和ES6。本文将深入探讨这些概念及其重要知识点。 首先，BOM（Browser Object Model...
JavaScript_Study_Notes:简单的javascript示例和学习笔记
05-05
本资源"JavaScript_Study_Notes"提供了一系列简单的JavaScript示例和学习笔记，旨在帮助初学者或有一定基础的开发者深化对JavaScript的理解。 首先，JavaScript是一种解释型的、基于原型的、动态类型的编程语言。它...
JavaScript学习笔记(四) BOM 与 DOM
半虹小站
11-12 371
这篇文章我们将会简单的介绍 BOM 和 DOM 常用的属性与方法，权且当作是一篇速查手册吧
JS DOM BOM学习笔记
Curry_On的博客
11-17 564
JS DOM BOM 学习笔记 本文根据B站pink老师视频整理，供复习参考 持续更新中：
Javascript学习笔记-----BOM和DOM操作
sinat_38505686的博客
05-08 370
Javascript学习外部对象描述BOMDOMwindow对象对话框定时器定时器周期性定时器 外部对象描述 BOM Browser Object Model：浏览器对象模型。用来访问和操纵浏览器窗口，使Javascript有能力与浏览器“对话” 通过使用BOM，可移动窗口、更改状态栏文本、执行其他不与页面内容发生直接联系的操作 没有相关标准，但被广泛支持 DOM Document Objec...
DOM和BOM-day25-个人学习笔记
时光乱了谁的心的博客
03-19 214
DOM和BOM-day25-个人学习笔记一、常用BOM对象：navigator history location screen1、navigator：保存浏览器配置信息的对象cookieEnabled：判断当前浏览器是否启用cookieplugins：保存所有插件对象的集合userAgent：保存了浏览器名称，版本号的字符串2、history：window对象中保存当前窗体访问过的url的历史记录...
javascript学习笔记之BOM和DOM详解
Less Is More
09-02 397
本文应用了很多实例，来解读JavaScript中BOM和DOM，DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。,而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口。 js组成 我们都知道， javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相
JavaScript之彻底搞懂DOM与BOM及其区别与用法
m0_57472099的博客
03-19 1024
因为这篇。
JavaScript函数和BOM及DOM编程（详细总结-无尿点）
让优秀成为一种习惯！
03-26 438
函数：系统函数和自定义函数 1.2 常见的系统函数 eval parseInt parseFloat isNaN 1.2.1 eval javascript中eval函数的作用是用于计算一个字符串，并将其作为脚本代码执行。
JavaScript之彻底搞懂DOM与BOM及其区别与用法，2024年最新阿里P8面试官都说太详细了
HUAXIAL的博客
04-17 589
先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。 既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！由于文件比较多，这里只是将部分目录截图出来，全套包含大
web_js_study:js学习笔记
05-07
JavaScript，简称JS，是一种广泛应用于Web...以上就是“js全栈学习”笔记的主要内容，涵盖JavaScript的基础知识、DOM操作、异步通信、新特性和框架应用等多个方面，适合初学者和进阶者系统学习和提升JavaScript技能。
初学JS部分笔记总结js笔记.docx
09-08
初学者在学习JS时，需要掌握以下几个核心知识点： 1. **JS引入方式**：JavaScript可以通过三种方式引入到HTML文件中，分别是内嵌（在HTML标签内使用`<script>`标签）、外链（通过`<script>`标签链接外部JS文件）和...
我的JavaScript学习笔记
02-25
这篇学习笔记将带你深入了解JavaScript的基础和一些进阶应用。 首先，我们从"Js基本语法"开始。JavaScript是一种弱类型、解释型的脚本语言，它支持变量声明（var、let、const）、数据类型（包括基本类型：字符串、...
大学生电子设计大赛-0-30V 4A数控稳压电源资料.rar
08-12
大学生电子设计大赛-0-30V 4A数控稳压电源资料.rar
Matlab编程汉字定位检测识别[Matlab编程].zip
08-12
MATLAB汉字检测和识别系统是一个基于MATLAB开发的系统，旨在检测输入图像中的汉字并进行识别。 该系统的主要功能包括： 1. 汉字检测：通过图像处理和特征提取算法，检测输入图像中的汉字区域。 2. 汉字识别：基于机器学习和图像识别算法，对检测到的汉字区域进行识别，并输出相应的文字结果。 3. 文字结果展示：将识别结果以文字形式展示在界面上，方便用户查看。 该系统的开发过程一般包括以下步骤： 1. 图像预处理：对输入图像进行灰度化、二值化等预处理操作，以便后续的汉字检测和识别。 2. 汉字检测：通过使用边缘检测、形态学操作等算法，检测输入图像中的汉字区域。 3. 特征提取：对检测到的汉字区域提取特征，如形状特征、纹理特征等。 4. 机器学习：使用事先训练好的模型，对提取的特征进行分类和识别，得到最终的识别结果。 5. 结果展示：将识别结果以文字形式展示在界面上，或保存为文本文件等形式。 需要注意的是，该系统的准确性和性能受多个因素影响，如图像质量、特征提取算法、机器学习模型等。因此，在实际应用中需要根据具体情况进行优化和调整，以提高系统的准确性和效率。
茶杯狗影视跳转源码2.0
最新发布
08-12
茶杯狗影视跳转源码2.0
20240812样例20240812
08-12
20240812样例20240812
stream-robot-group-message-quick-start.zip
08-12
钉钉机器人企业内部群的交互问答的启动代码，包含接收用户消息，自定义钉钉机器人发送消息
JavaScript学习笔记：DOM、BOM与AJAX详解
对于初学者来说，这部分内容可能是学习JavaScript的第一步，后续章节可能会深入讲解DOM（Document Object Model，文档对象模型）和BOM（Browser Object Model，浏览器对象模型），它们分别是处理网页结构和浏览器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值