寸_铁

这个屌丝很懒，什么也没留下！

热门标签

JavaScript 基础二_document elementbyid 设置width

作者：寸_铁 | 2024-07-12 02:14:44

踩

document elementbyid 设置width

浏览器对象

• 窗口对象(Window)

– Window对象处于对象层次的最顶端，它提供了处理浏览器窗口的方法和属性。

–

• 位置对象(Location)

– Location对象提供了与当前打开的URL一起工作的方法和属性，它是一个静态的对象。

• 历史对象(History)

– History对象提供了与历史清单有关的信息。

• 文档对象(Document)

– document对象包含了与文档元素(elements)一起工作的对象，它将这些元素封装起来供编程人员使用。这是我们主要使用的对象，实际上，js是把所有的html元素（也就是所有标签）视为对象，比如一个<div>就是一个div对象。而这些对象都从属于document对象

• 各种浏览器对象形成了一种层次模型，我们称其为文档对象模型（Document Object Model），简称DOM

浏览器对象的引入方式

• 通过文档对象模型中的层次关系引用

– 例如：在引用forms对象时，使用 window.document.forms

• 数组型浏览器对象的引用

– 在文档对象模型中，有些对象属于数组型对象，如document对象下一层的images、links、forms等对象，在引用这种数组对象时，可以使用对象在数组中的位置(下标)来引用

– 例如：window.document.forms[0]，表示引用文档中的第一个表单。

• 注：

– Window对象作为文档对象模型中的最顶层对象，JavaScript认为它是默认的，因此可以不写出来。如：window.document.forms可以写成document.forms

– 例如 document.forms[1].submit() ，就是让第二个表单进行提交

• 通过对象的name属性来引用

– 例如：引用一个name属性是form1的表单对象，使用window.document.form1。

– 或代码：document.getElementsByName(“form1”)。

获取到所有name是form1的标签组成的一个对象数组

注意：IE中这个方法可能无效

• 通过对象的id属性来引用

– 例如：document.getElementById(“myid”)得到的是id为myid的表单对象

– 注意，方法名是getElementById，而不是Elements，注意最后的S

– 推荐使用此方法。注意要使用此方法必须保证id的唯一性

• 通过标签名来引用

document.getElementsByTagName(“标签名”)

例如标签名写div，就会获取到所有div组成的一个对象数组

浏览器对象的属性

• 标签被视为浏览器对象，我们自然可以引用和改变对象的属性。引用属性的方法就是对象后面加上点和属性名。例如：

document.getElementById(“myid”) .width= “ 100px ” ;

标签的width属性被改变为100px

• 标签的样式也是它的属性，同样可以改变，例如：

var tag=document.getElementById(“myid

tag .style. backgroundColor = “ #AAA ” ;

标签的样式中的背景颜色被改变为代码AAA表示的颜色。

需要注意的是，样式属性的名字并不是完全跟 css 里写法一样，例如 background-color 属性，在 js 代码中要写成 backgroundColor

具体哪种属性在 js 中怎么写，可查阅 css 帮助手册

• 标签对象还有一些隐含的属性，js默认赋予的。例如tagName，表示该标签的类型。一个div标签对象，它的tagName属性的值就是div

• outerHTML、innerHTML、innerText属性

• 这三个属性分别代表了：

outerHTML：标签对象本身及其内部所有内容，包括其他标签

innerHTML：标签对象内部所有内容，包括其他标签

innerText：标签对象内部所有 文本

下图以一个 div 为例，演示了这三个属性的范围区别

• 浏览器对象是可以自己定义属性的，例如：

<div myattr=“abc” id=“md”></div>

• 给这个div标签定义了一个叫myattr的属性，并赋值为abc

• 通过代码 document.getElementById(“md”) . myattr 可以获取到这个自定义属性的值，也就是abc。当然也可以通过直接赋值来改变它

• 注意：不同浏览器对自定义属性的支持程度不同

浏览器对象的一般方法

• focus ()方法，让一个标签获取焦点，例如：

document.getElementById(“md”). focus();

调用了id为”md”的标签的focus方法，结果是该标签被选中

• submit()方法，仅限表单对象，效果如同按下提交按钮

• reset ()方法，仅限表单对象，效果如同按下重置按钮

windows对象的方法

• setInterval ()方法，定时调用函数。通常用window对象调用，当然window可以省略不写。语法是：

setInterval( “ 函数名 () ” , 间隔时间 )

间隔时间的单位是毫秒，例如：var end = setInterval(“clock()”, 500)

意思是每隔500毫秒调用一次clock()方法。这效果类似java的线程。

你可以多次使用该方法，从而启动多个线程。

该方法的返回值是该线程的编号，范例中用名叫end的变量接收了。

• clearInterval(线程编号)方法，结束setInterval ()方法启动的线程。如上述范例，当想要结束这个线程，就可以调用

• window. clearInterval(end) 同样的，window可以省略不写

Window对象也就是窗口对象，处于文档对象模型的最顶层，代表当前浏览器窗口。

• 主要介绍两个方法：

– open(“url”, [“window name”[, “features表”]])

功能：打开一个新的窗口

参数说明：

– url:要打开窗口的url地址

– Window name是新打开窗口的名称

– Window features 是新窗口的实际特性（窗口的外观）可选项

Window features的可能参数：

– height 窗口的高度

– width 窗口的宽度

– menubar是否有菜单

– scrollbars 是否有滚动条

– resizable 窗口大小是否可以改变

– close()

功能：关闭窗口

• 介绍：Window对象也就是窗口对象，处于文档对象模型的最顶层，代表当前浏览器窗口。

• 主要介绍两个方法：

– open(“url”, [“window name”[, “features表”]])

功能：打开一个新的窗口

参数说明：

– url:要打开窗口的url地址

– Window name是新打开窗口的名称

– Window features 是新窗口的实际特性（窗口的外观）可选项

Window features的可能参数：

– height 窗口的高度

– width 窗口的宽度

– menubar是否有菜单

– scrollbars 是否有滚动条

– resizable 窗口大小是否可以改变

– close()

功能：关闭窗口

window的三种对话框方法

• alert()方法弹出一个显示信息的警示对话框

alert(" 您好 ")

• confirm()方法弹出带有提示信息的确认对话框，根据点击返回逻辑值

flag=confirm(" 确认删除吗 ?")

• prompt()方法弹出一个带有输入信息的对话框，返回所输入的值

name=prompt(" 请输入你的名字 ")

document对象的方法

• document对象是JavaScript实现网页各种功能中最常用的基本对象之一，它代表浏览器窗口中的文档，可以用来处理文档中包含的html元素，如表单，图像，超链接等。

• write()

– 作用：向文档中写入文本

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/寸_铁/article/detail/812355