JavaScript DOM2

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量64 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/navyouth/p/7711694.html
版权

1、Window.history：window.open打开网页的方式必须是_self

window.history.back()后退

Window.history.forward()前进

<body>
        <input type="button" value="打开窗口" οnclick="Dk()"  />
        <input type="button" value="前进" οnclick="Qian()" />
 </body>
    <script type="text/javascript">
		function Dk()
		{
			window.open("Untitled-2.html","_self","width=300 height=300");	
		}
		
		function Qian()
		{
			window.history.forward();	
		}

 

Window.history.go(n)；n为正数就是前进几个页面，为负数就是后退几个页面。

<body>
        <input type="button" value="打开窗口" οnclick="Dk()"  />
        <input type="button" value="前进" οnclick="Qian()" />
 </body>
    <script type="text/javascript">
		function Dk()
		{
			window.open("Untitled-2.html","_self","width=300 height=300");	
		}
		
		function Qian()
		{
			window.history.go(1);	
		}

 2、window.document

查找元素

根据id查找    var  d1 = document.getElementById("d1");

根据class查找  var d2 = document.getElementsByClassName("d2");找到的是数组

.根据标签名找  var d3 = document.getElementsByTagName("div");找到的是数组

表单元素  var d4 = document.getElementsByName("aa") 找到的是数组

3、操作
        1.操作内容 var d1 = document.getElementById("d1");

         获取内容 

        alert(d1.innerText);
        alert(d1.innerHTML);
        修改内容
        d1.innerHTML = "<b>修改</b>";

    <body>
        <div id="d1" style="width:100px; height:100px;">你好</div>
    </body>
	   <script type="text/javascript">
		   var b=document.getElementById("d1")
		   b.innerHTML="<b>修改</b>"
       </script>

 


        d1.innerText = "修改";

    <body>
        <div id="d1" style="width:100px; height:100px;">你好</div>
    </body>
	   <script type="text/javascript">
		   var b=document.getElementById("d1")
		   b.innerText="修改"
       </script>
   


       2.操作属性
        var d1 = document.getElementById("d1");
       获取属性
        alert(d1.getAttribute("width"));
        设置属性
        d1.setAttribute("width","200");
        移除属性
        d1.removeAttribute("width");

    <body>
        <input type="button" value="按钮" disabled="disabled" id="d1"/>
    </body>
	   <script type="text/javascript">
		   var b=document.getElementById("d1")
		 
       </script>

 

    <body>
        <input type="button" value="按钮" disabled="disabled" id="d1"/>
    </body>
	   <script type="text/javascript">
		   var b=document.getElementById("d1")
		   b.removeAttribute("disabled")
       </script>

 

        3.操作样式
        var d1 = document.getElementById("d1");
        获取样式(只能获取内联，内嵌和外部都不能获取)
        alert(d1.style.color);
       alert(d1.style.backgroundColor);
        修改样式
        d1.style.backgroundColor = "";

    <body>
        <div id="d1" style="width:100px; height:100px; background-color:#0F0">你好</div>
    </body>
	   <script type="text/javascript">
		   var b=document.getElementById("d1")
		   b.innerHTML="<b>修改</b>"

 

 

    <body>
        <div id="d1" style="width:100px; height:100px; background-color:#0F0">你好</div>
    </body>
	   <script type="text/javascript">
		   var b=document.getElementById("d1")
		   b.innerHTML="<b>修改</b>"
		   b.style.width="200px"
       </script>

 

 

转载于:https://www.cnblogs.com/navyouth/p/7711694.html

weixin_33849942
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript中 DOM 的概念解释
norang的博客
06-04 1858
3.1 文档：DOM中的“D” 如果没有document （文档），DOM也就无从谈起。当创建了一个网页 并把它加载到Web浏览器中时，DOM就在幕后悄然而生。它把你编写 的网页文档转换为一个文档对象。 在人类语言中，“对象”这个词的含义往往不那么明确，它几乎可以用来 称呼任何一种东西。但在程序设计语言中，“对象”这个词的含义非常明 确。 3.2 对象：DOM中的“O” 在上一章的末尾，我们向大家展示了几个JavaScript对象的例子。你应该 还记得，“对象”是一种自足的数据集合。与某个特定对象相关联的变
javascript dom2 源码及pdf
02-09
总的来说，JavaScript DOM2是Web开发中的关键工具，它让JavaScript成为了一种强大的客户端脚本语言，为网页带来了丰富的动态性和交互性。通过学习和实践，开发者可以提高网页的用户体验，创建出更加智能和灵活的Web...
javascript DOM详解之DOM2与DOM3
seacean2000的专栏
12-13 1万+
DOM2与DOM3主要是在DOM1的基础上引入更多的交互能力，支持了更高级的XML特性。 DOM2做的主要的扩展子集具体为： DOM Level 2 Core:在一级核心的基础上，为节点添加了更多的方法和属性。 DOM Level 2 Views:为文档定义了基于样式信息的不同视图 DOM Level 2 Events:说明了如何使用事件与DOM进行交互。 DOM Level 2 Sty
浅谈JavaScript中DOM2
欧唯薇
04-06 430
浅谈JavaScript中DOM2 DOM2级分成了以下六个模块： 1、DOM2级核心：为节点添加了方法和属性 2、DOM2级视图 3、DOM2级事件：说明了如何使用事件与DOM文档交互 4、DOM2级样式：CSS 5、DOM2级遍历和范围 6、DOM2级HTML 一、样式 在THML中，为网页设置样式有三种方法，而DOM2则围绕这三种方法提供了一套API，可以使用下列代...
JavaScript之DOM
qq_43751200的博客
06-05 1752
DOM
JavaScript DOM操作
好好学习天天向上
03-27 5101
文章目录JavaScript DOM操作事件的冒泡和事件的委托事件冒泡事件委派 JavaScript DOM操作 事件的冒泡和事件的委托 事件冒泡 同一片区域，给其中的元素都绑定了点击事件，点击公共区域时，触发顺序？ 假设如图，从span->box1->body依次触发 事件的冒泡(Bulle)：事件的向上传导，事件在目标元素处理后，会由内向外的一层层传递 在开发中大部分情况冒泡都是有用了，如果不需要可以通过事件对象event.cancelBubbl取消冒泡。 let span = docum
JavaScript DOM详解
Chiclaim
10-03 7379
DOM的获取Element的方法和属性： getElementById(id) getElementsByTagName(tag) getElementsByClassName(class) parentNode childNodes firstChild lastChild nextSibling
Javascript之BOM与DOM讲解
热门推荐
晨港飞燕的专栏
05-13 8万+
一.Javascript组成JavaScript的实现包括以下3个部分：ECMAScript(核心)描述了JS的语法和基本对象。文档对象模型 （DOM）处理网页内容的方法和接口浏览器对象模型（BOM）与浏览器交互的方法和接口javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异,IE 扩展了 BOM，...
JavaScript删除DOM
weixin_56550293的博客
12-16 4853
删除一个DOM节点就比插入要容易很多 要删除一个节点秒首先要获取该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉 //获取自身节点 var self=document.getElementById('id'); //获取自身节点的父节点 var parent=self.parentElement; //删除节点 parent.removeChild(self); 注意：删除后的节点虽然已经不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置 当你遍..
JavaScript与DOM编程
寻梦&之璐
05-05 6198
文章目录JS简介常量与变量 JS简介 JS是一种在浏览器中运行的解释性脚本语言。JS是由ES（ECMAScript），DOM（文档对象模型），BOM（浏览器对象模型）组成 ECMAScript 6.0（简称 ES6）是JavaScript语言的下一代标准，已经在2015年6月发布。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，称为企业级开发语言 Node.js是一个基于Chrome V8引擎的JavaScript运行环境，是让JS运行在服务端的开发平台，它使得JS成为与PHP，Py
《JavaScript DOM 编程艺术》
weixin_36986228的博客
02-01 830
JavaScript dom操作 趣味案例
06-25
本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可...
JavaScript DOM操作 示例代码
06-25
包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含...
javascript Dom 编程艺术
08-11
本 书在简洁明快地讲述JavaScript和DOM的基本知识之后，通过几个实例演示了专业水准的网页开发技术，透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践，并全面探讨了HTML5以及jQuery等JavaScript库...
JavaScript dom操作 dom元素查询 示例代码
06-27
JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码...
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 166
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 84
vue 自定义滚动条同步拖动（移动端）
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
Vinca@的博客
07-08 872
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
前端javascript中的排序算法之插入排序
峰会路转的博客
07-09 179
【代码】前端javascript中的排序算法之插入排序。
javascript DOM
04-04
JavaScript DOM (Document Object Model) is a programming interface that allows developers to interact with and manipulate HTML and XML documents. The DOM represents an ... Through the DOM, developers ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值