document.getElementById详解
document 对象_方法
document 对象_方法document 对象是 HTML 文档的根对象,它提供了许多方法来访问和操作文档的内容。
1. document.write() 方法document.write() 方法用于向文档中写入 HTML 代码。
它可以用来创建文档的结构,添加文本、图像、链接等元素。
html<!DOCTYPE html><html><head><title>Document Write Example</title></head><body><h1>Hello World!</h1><script>document.write("<p>This is a paragraph.</p>");</script></body></html>输出结果:html<!DOCTYPE html><html><head><title>Document Write Example</title></head><body><h1>Hello World!</h1><p>This is a paragraph.</p></body></html>2. document.getElementById() 方法document.getElementById() 方法用于根据ID 属性获取文档中的元素。
它返回一个指向该元素的引用,以便我们可以对其进行操作。
html<!DOCTYPE html><html><head><title>Get Element by ID Example</title></head><body><h1 id="heading">Hello World!</h1><script>var heading = document.getElementById("heading");heading.style.color = "red";</script></body></html>输出结果:html<!DOCTYPE html><html><head><title>Get Element by ID Example</title></head><body><h1 id="heading" style="color: red;">Hello World!</h1></body></html>3. document.getElementsByTagName() 方法document.getElementsByTagName() 方法用于根据标签名获取文档中的元素。
javascriptdocument 方法
javascriptdocument 方法JavaScript Document 对象及其方法JavaScript Document 对象是HTML DOM 的一部分,表示当前加载的网页文档。
它提供了一组用于操作和访问网页中各个元素的方法和属性。
本文将介绍一些常用的Document 方法,并逐步回答问题。
一、document.getElementById()document.getElementById() 方法通过指定的元素id 返回对该元素的引用。
该方法在DOM 中被广泛使用,用于获取页面中的特定元素并对其进行操纵。
获取id 为"myElement" 的元素const element = document.getElementById("myElement");问题1:如何使用document.getElementById() 方法获取页面上特定元素?要使用document.getElementById() 方法,首先需要在获取的元素上添加一个唯一的id 属性,然后将该id 作为参数传递给该方法。
方法返回一个对该元素的引用,可以通过该引用进行各种操作。
例如,假设页面上有一个按钮元素:<button id="myButton">Click Me</button>可以使用document.getElementById() 方法获取该按钮元素的引用:const button = document.getElementById("myButton");二、document.getElementsByTagName()document.getElementsByTagName() 方法返回指定标签名的元素集合。
该方法可用于获取页面中具有相同标签的一组元素。
获取所有的<p> 元素问题2:如何使用document.getElementsByTagName() 方法获取所有p 元素?要使用document.getElementsByTagName() 方法获取所有p 元素,只需将"p" 作为参数传递给该方法即可。
JS中getElementById()、getElementsByName()、getElementsByTagName() 的区别和应用
JS中getElementById()、getElementsByName()、getElementsByTagName() 的区别和应用getElementById() 方法可返回对拥有指定ID 的第一个对象的引用语法:document.getElementByIdx_x_x(id)getElementsByName() 方法可返回带有指定名称的对象的集合语法:document.getElementsByName(name)两者的不同点:(1)该方法与getElementById() 方法相似,但是它查询元素的name 属性,而不是id 属性。
(2)因为一个文档中的name 属性可能不唯一(如HTML 表单中的单选按钮通常具有相同的name 属性),所有getElementsByName() 方法返回的是元素的数组,而不是一个元素。
getElementsByTagName_r() 方法可返回带有指定标签名的对象的集合,返回元素的顺序是它们在文档中的顺序。
语法:document.getElementsByTagName_r(tagname)提示:(1)如果把特殊字符串"*" 传递给getElementsByTagName_r() 方法,它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序。
(2)传递给getElementsByTagName_r() 方法的字符串可以不区分大小写。
例子1:<html><head><script type="text/javascript">function getV alue(){var x=document.getElementByIdx_x_x("myHeader");alert(x.innerText);//alert(x.innerHTML);}function getV alue2(){//var n=document.getElementByIdx_x_x("name1");var n=document.getElementByIdx_x_x("name2");alert(n.value);}function id(x) {if (typeof x == "string")return document.getElementByIdx_x_x(x);return x;}</script></head><body><h1 id="myHeader" onclick="getV alue();">这是标题1</h1><p>点击标题,会提示出标题1的值。
html中document用法
html中document用法HTML中的document对象是JavaScript编程中常用的一个对象,它允许我们通过脚本控制和操作网页的内容和结构。
使用document对象,我们可以实现动态地改变和更新网页的元素、样式和事件等。
以下是关于HTML中document对象的一些常见用法。
1. 获取元素:可以使用document对象的getElementById()方法来获取具有指定id属性值的元素。
例如,如果我们想获取id为"myElement"的元素,可以使用以下代码:```javascriptvar element = document.getElementById("myElement");```2. 改变元素内容:使用document对象的innerHTML属性,可以动态地改变元素的内容。
例如,我们可以将一个段落的内容更改为"Hello, World!":```javascriptdocument.getElementById("myParagraph").innerHTML = "Hello, World!";```3. 创建新元素:通过document对象的createElement()方法,我们可以在网页中动态地创建新的HTML元素。
例如,我们可以创建一个新的段落元素,然后将其添加到特定的父元素中:```javascriptvar newPara = document.createElement("p");var parentElement = document.getElementById("myDiv");parentElement.appendChild(newPara);```4. 修改元素样式:使用document对象的style属性,可以通过JavaScript改变元素的样式。
document.getElementById使用
* *
* 这个函数中最关键的地方是 document.getElementById ,他是什么呢? *
* *
* </script> *
C :另外还得到一个细节:
① document.getElementById 有时会抓 name 放过了 id ,据说是 IE 的一个 BUG ;
页面中有
<input type="hidden" value="2" />
<select >
一个是 一个是
用 document.getElementById 取第二个,可是,取到的却是第一个 >
在 IE 中 getElementById 竟然不是先抓 id 而是先找 name 相同的物件 ...
<INPUT TYPE="text" NAME="tbxpwd" id="tbxpwd">
<INPUT TYPE="button" value="檢查" name="btnchk" onclick="chkacc();">
</FORM>
</BODY>
</HTML >
② javascript中的getElementbyId使用
“ object ”,而不是具体的值,它有 value 和 length 等属性,加上 .value 得到的才
是具体的值!
参考资料:
1. document . getElementById 的用法和 DHTML.CHM 的下载地址
javaScript,页面自动加载事件详解
javaScript,页面自动加载事件详解 篇一:javascript 动态添加事件 往往我们需要在 JS 中动态添加事件,这就涉及到浏览器兼容性问题了,以下谈及的几 种方法,我们也常常混合使用。
方法一、setAttribute var obj = document.getElementById("obj"); obj.setAttribute("onclick", "javascript:alert('测试');"); 这里利用 setAttribute 指定 onclick 属性,简单,很好理解, 但是: IE 不支持, IE 并不是不支持 setAttribute 这个函数, 而是不支持用 setAttribute 设 置某些属性, 包括对象属性、 集合属性、 事件属性, 也就是说用 setAttribute 设置 style、 onclick、 onmouseover 这些属性在 IE 中是行不通的。
LEO:在 IE6 下尝试成功 方法二、用 attachEvent 和 addEventListener IE 支持 attachEvent obj.attachEvent("onclick", Foo); function Foo() { alert("测试"); } 也可写在一起 obj.attachEvent("onclick", function(){alert("测试");}); 其它浏览器支持 addEventListener obj.addEventListener("click", Foo, false); function Foo() { alert("测试"); } 同样也可写在一起 obj.addEventListener("click", function(){alert("测试");}, false); 注意 attachEvent 的事件带 on,如 onclick,而 addEventListener 不带 on,如 click。
js中获取dom节点的方法
JavaScript 中获取 DOM 节点的方法在 JavaScript 中,获取 DOM 节点是操作 DOM 的基础,本文介绍了几种常用的获取 DOM 节点的方法。
下面是本店铺为大家精心编写的5篇《JavaScript 中获取 DOM 节点的方法》,供大家借鉴与参考,希望对大家有所帮助。
《JavaScript 中获取 DOM 节点的方法》篇11. 使用 DOM API 获取节点DOM API 提供了多种获取节点的方法,包括:- document.getElementById(id):通过元素的 id 获取元素节点。
- document.getElementsByClassName(className):通过元素的类名获取元素节点。
- document.querySelector(selector):通过 CSS 选择器获取元素节点。
- document.querySelectorAll(selector):通过 CSS 选择器获取所有匹配的元素节点。
例如:```const idElement = document.getElementById("my-element"); const classElement =document.getElementsByClassName("my-class")[0];const selectorElement =document.querySelector(".my-selector");const selectorElements =document.querySelectorAll(".my-selector");```2. 使用 jQuery 获取节点jQuery 是一个流行的 JavaScript 库,它提供了一些方便的方法来获取 DOM 节点,包括:- $(id):通过元素的 id 获取元素节点。
JS操作document对象
JS操作document对象找到对象:document.getElementById():返回对拥有指定 id 的第⼀个对象的引⽤。
document.getElementsByName():返回带有指定名称的对象集合。
document.getElementsByTagName():返回带有指定标签名的对象集合。
document.getElementsByClassName():返回对拥有指定 class 的对象集合。
操作对象:操作属性:取值:getAttribte();document.getElementsByTagName("标签名")[0].getAttribute("属性名");赋值:setAttribte();document.getElementsByTagName("标签名")[0].setAttribute("属性名","属性值");删除赋值:removeAttribute();document.getElementsByTagName("标签名")[0].removeAttribute("属性名");操作样式:内联样式:style.xxxx;class:1.className。
2.把class当成属性来看element.className = 'blue';操作内容:表单元素:value;document.getElementById("id名字").value;⽂本框,单选框,复选框。
⾮表单元素:innerHTML:document.getElementById("id名字").innerHTML="<a href='https://'>到百度</a> ";浏览器会将inneHTML后⾯的内容作为html来解析。
document.getElementById介绍
document.getElementById介绍把你的⼤脑当做浏览器执⾏下⾯的代码两次,分别是IE6和IE9:复制代码代码如下:function testFunc(){alert('test')}$(function(){var g = document.getElementById ,w = window.testFunc ;//galert(typeof(g));alert(String(g));alert(g instanceof Object);alert(g instanceof Function);//walert(typeof(w));alert(String(w));alert(w instanceof Object);alert(w instanceof Function);//执⾏alert(g('t'));w();});在标准浏览器中(IE9、FF、chrome等)上述代码执⾏得⾮常⼀致,返回结果如下:typeof => "function"复制代码代码如下:String => "function #funcName#{[native code]}"instanceof Object => trueinstanceof Function => true很奇怪,虽然类型是函数,但是我们却不能直接使⽤括号来执⾏函数g,⽽需要使⽤callg.call(document,elementId);但是如果运⾏环境是IE6,⼀切看起来⾮常诡异,下⾯是运⾏结果(注意粗体部分):复制代码代码如下://gtypeof => "object"String => "function getElementById{[native code]}"instanceof Object => falseinstanceof Function => false//wtypeof => "function"String => "function testFunc{alert('test')}"instanceof Object => trueinstanceof Function => true在IE 6下,对于g和w都只能使⽤括号直接执⾏函数,⽽不需要使⽤call。
document.getElementById详解
document.getElementById详解document.getElementById(" ") 得到的是一个对象,用alert 显示得到的是“ object ”,而不是具体的值,它有value 和length 等属性,加上.value 得到的才是具体的值!参考资料:1. document . getElementById 的用法和DHTML.CHM 的下载地址今天在网络上查找document . getElementById 的用法,如下:A :语法:oElement = document . getElementById ( sID )参数:sID : 必选项。
字符串(String) 。
返回值:oElement : 对象(Element) 。
说明:根据指定的id 属性值得到对象。
返回id 属性值等于sID 的第一个对象的引用。
假如对应的为一组对象,则返回该组对象中的第一个。
如果无符合条件的对象,则返回null 。
B :有一个例子可以很好的说明:***************************************************************************** ** 这个函数中最关键的地方是document.getElementById ,他是什么呢?** ** 关于document.getElementById ,是这样的:** ** 如:document.getElementById('hdrPageHeader_lblTitle') ** ** 表示的意思是:获取ID 为:hdrPageHeader_lblTitle 的对象** ** <a >aa</a> ** <a >bb</a> ** <a >cc</a> ** <script language="javascript"> ** <!-- ** var idtext=document.getElementById('hdrPageHeader_lblTitle') ** alert(idtext.innerText) ** //--> ** </script> *C :另外还得到一个细节:① document.getElementById 有时会抓name 放过了id ,据说是IE 的一个BUG ;页面中有<input type="hidden" value="2" /><select >一个是一个是用document.getElementById 取第二个,可是,取到的却是第一个>在IE 中getElementById 竟然不是先抓id 而是先找name 相同的物件... 兩個form, 每個form 有兩個textbox, 兩個form 中的textbox 是相同的name, 但id 都不同...這樣在Firefox 是沒問題的... 但在IE 卻只抓得到第一個出現的name 資料2. document 对象/man/dhtmlcn/objects/obj_document.html属性:title ; bgColor ; url; ( 使用:document.title)方法:focus使得元素得到焦点并执行由onfocus 事件指定的代码。
document获取父元素的方法
document获取父元素的方法以document获取父元素的方法为标题在前端开发中,我们经常需要操作DOM元素。
而DOM元素的层级关系中,父元素通常承载着更高层级的意义。
因此,我们经常需要通过document对象来获取父元素,以便进行一些操作。
本文将介绍一些常用的方法来获取父元素,并给出实际应用场景。
一、使用parentNode属性获取父元素在DOM中,每个元素节点都有一个parentNode属性,它指向该节点的父节点。
通过这个属性,我们可以轻松地获取到当前元素的父元素。
例如,假设我们有一个HTML页面,其中包含如下的结构:```html<div id="parent"><div id="child"></div></div>```我们可以通过以下代码来获取父元素:```javascriptvar childNode = document.getElementById('child');var parentNode = childNode.parentNode;console.log(parentNode); // 输出:<div id="parent"></div>```在上述代码中,我们首先使用getElementById方法获取到id为'child'的元素节点,然后通过parentNode属性获取到它的父节点。
最后,我们将父节点输出到控制台上。
二、使用parentElement属性获取父元素除了parentNode属性,DOM还提供了parentElement属性来获取父元素。
这两个属性的功能类似,但存在一些细微的差别。
parentElement属性返回的是父元素节点,并且只有当父元素是一个元素节点时才有值。
而parentNode属性则返回的是父节点,不管它是元素节点、文本节点还是属性节点。
document.getelementbyid用法
document.getelementbyid用法介绍如下:
document.getElementById()是JavaScript DOM API中的一种方法,用于通过元素的id属性获取HTML文档中的某个元素节点。
该方法接收一个参数,即要获取的元素的id值,并返回表示该元素的对象,如果找不到该元素,则返回null。
例如,假设我们有以下HTML代码:
<div id="myDiv">Hello World!</div>
我们可以使用document.getElementById()方法来获取该元素节点并对其进行操作:const myDiv = document.getElementById("myDiv"); // 获取id为"myDiv"的元素节点myDiv.style.color = "red"; // 修改元素的样式,将文本颜色改为红色
需要注意的是,id属性必须是唯一的,即一个HTML文档中不能存在两个或多个具有相同id值的元素,否则该方法无法准确地获取所需的元素。
java document getelementbyid的用法
java document getelementbyid的用法一、概述在Java中,我们通常使用DOM(Document Object Model)API来操作HTML或XML文档。
其中,getElementById方法是用于获取具有指定ID的HTML元素的方法。
本文将详细介绍getElementById方法的用法。
二、基本语法getElementById方法的基本语法如下:```javaElement element = document.getElementById(id);```其中,document表示当前文档,id是要获取的元素的ID。
该方法返回一个表示具有指定ID的元素的Element对象。
如果文档中不存在具有指定ID的元素,该方法将返回null。
三、使用示例下面是一个使用getElementById方法的示例:```javaimport java.io.*;import javax.xml.parsers.*;import org.w3c.dom.*;public class Example {public static void main(String[] args) throws Exception {DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();DocumentBuilder builder =factory.newDocumentBuilder();Document document = builder.parse(newFile("example.html"));// 获取具有指定ID的元素Element element = document.getElementById("myId");if (element != null) {// 操作元素...System.out.println("Element found: " + element.getNodeName());} else {System.out.println("Element not found");}}}```在上面的示例中,我们使用DocumentBuilderFactory和DocumentBuilder来解析一个HTML文件,并使用getElementById方法获取具有指定ID的元素。
element在js中的用法
element在js中的用法在JavaScript中,element是一种表示HTML元素的对象。
它可以通过各种方式获取,如通过DOM方法、选择器或事件处理程序。
一些常见的element的用法包括:1. 获取element:可以使用document.getElementById()方法根据元素的ID获取element对象,例如:```var myElement = document.getElementById("myElement");```2. 操作element的属性:可以使用element的属性来设置或获取其各种属性,如innerHTML、textContent、style等,例如:```myElement.innerHTML = "Hello, World!";myElement.style.color = "red";```3. 添加、修改或移除element的子元素:可以使用element的方法来添加、修改或移除其子元素,如appendChild()、removeChild()等,例如:```var newElement = document.createElement("div"); myElement.appendChild(newElement);myElement.removeChild(newElement);```4. 添加、移除或绑定事件处理程序:可以使用element的方法来添加、移除或绑定事件处理程序,如addEventListener()、removeEventListener()等,例如:```myElement.addEventListener("click", function() {console.log("Element clicked!");});myElement.removeEventListener("click", myEventHandler);```这些只是element在JavaScript中的一些常见用法,还有许多其他的用法和方法可根据具体需求进行探索和学习。
js根据元素文本查找元素的方法
js根据元素文本查找元素的方法(原创版2篇)目录(篇1)1.题目:JavaScript 根据元素文本查找元素的方法2.目的:介绍如何使用 JavaScript 根据元素的文本内容来查找和筛选 DOM 元素3.方法一:使用 getElementById() 方法4.方法二:使用 querySelector() 方法5.方法三:使用 querySelectorAll() 方法6.示例代码正文(篇1)在网页开发中,我们常常需要根据元素的文本内容来查找和筛选 DOM 元素。
JavaScript 提供了多种方法来实现这一功能。
本文将介绍三种常用的方法:getElementById()、querySelector() 和 querySelectorAll()。
首先,我们来看方法一:使用 getElementById() 方法。
该方法接受一个参数,即元素的 ID。
返回一个具有指定 ID 的元素,如果未找到则返回 null。
示例代码如下:```javascript// 假设页面中有如下 HTML 代码// <div id="example">我是一个例子</div>var element = document.getElementById("example");if (element) {console.log(element.innerHTML); // 输出:我是一个例子} else {console.log("元素未找到");}```接下来,我们介绍方法二:使用 querySelector() 方法。
该方法接受一个 CSS 选择器字符串作为参数,返回匹配的第一个元素。
如果没有找到匹配的元素,则返回 null。
示例代码如下:```javascript// 假设页面中有如下 HTML 代码// <div id="example">我是一个例子</div>// <div id="other">我是另一个例子</div>var element = document.querySelector("#example");if (element) {console.log(element.innerHTML); // 输出:我是一个例子} else {console.log("元素未找到");}```最后,我们介绍方法三:使用 querySelectorAll() 方法。
JS中querySelector与getElementById方法区别
JS中querySelector与getElementById⽅法区别⽬录1. 概述1.1 querySelector() 和 querySelectorAll() 的⽤法1.2 getElement(s)Byxxxx 的⽤法2. 区别2.1 getElement(s)Byxxxx 获取的是动态集合,querySelector 获取的是静态集合2.2 接收的参数不同2.3 浏览器兼容不同1. 概述在看代码的时候发现基本上都是⽤querySelector() 和querySelectorAll() 来获取元素,疑惑为什么不⽤getElementById() 。
可能因为⾃⼰没⽤过那两个,所以并不清楚原因所在。
1.1 querySelector() 和 querySelectorAll() 的⽤法querySelector() ⽅法定义:querySelector()⽅法返回⽂档中匹配指定 CSS 选择器的⼀个元素;注意:uerySelector() ⽅法仅返回匹配指定选择器的第⼀个元素。
如果你需要返回所有的元素,请⽤ querySelectorAll() ⽅法替代;语法:document.querySelector(CSS selectors);参数值:String 必须。
指定⼀个或多个匹配元素的 CSS 选择器。
使⽤它们的 id, 类, 类型, 属性, 属性值等来选取元素。
对于多个选择器,使⽤逗号隔开,返回⼀个匹配的元素。
返回值: 匹配指定 CSS 选择器的第⼀个元素。
如果没有找到,返回 null。
如果指定了⾮法选择器则抛出 SYNTAX_ERR 异常。
querySelectorAll() ⽅法定义:querySelectorAll() ⽅法返回⽂档中匹配指定 CSS 选择器的所有元素,返回 NodeList 对象;NodeList 对象表⽰节点的集合。
可以通过索引访问,索引值从 0 开始;提⽰: 可使⽤ NodeList 对象的 length 属性来获取匹配选择器的元素属性,然后遍历所有元素,从⽽获取想要的信息;语法:elementList = document.querySelectorAll(selectors);elementList 是⼀个静态的NodeList 类型的对象;selectors 是⼀个由逗号连接的包含⼀个或多个CSS 选择器的字符串;参数值:String 必须。
getElementById的三个用法
getElementById的三个⽤法document.getelementById(id名称).属性.属性类型1.<div id=“uu”>1111111<b>222</b></div>document.getelementById(“uu”).innerHTML2.<img src=“1.gif” id=“uu”>document.getelementById(“uu”).src例⼦;:function subs(m){document.getElementById("aa").src=m;}<img src="01.jpg" id="aa" width="100" height="160"/><select onchange="subs(this.value)"><option value="01.jpg">麦迪</option><option value="02.jpg">邓肯</option><option value="03.jpg">科⽐</option><option value="04.jpg">詹姆斯</option></select>3.<div id=“uu” style="bground:red">document.getelementById(“uu”). Style. bground例⼦:function subs1(m){document.getElementById("ss").style.background=m;}<div id="ss" style="height: 100px;width: 200px; background: blue;">改变颜⾊</div><select onchange="subs1(this.value)"><option value="red">红⾊</option><option value="yellow">黄⾊</option><option value="pink">粉红⾊</option><option value="blue">蓝⾊</option></select>。
document,element,dom对象api详解
document,element,dom对象api详解Document对象:根元素的访问,也就是HTML标签的访问。
使⽤document.documentElement访问根对象。
使⽤Document对象查找对象getElementById():通过节点的id属性,查找对应节点。
getElementsByName():通过节点的name属性,查找对应节点。
getElementsByTagName():通过节点名称,查找对应节点。
使⽤Document对象的⽅法创建节点:crateElement(tagName):创建元素节点。
createTextNode(data):创建⽂本节点。
createAttirbute(name):创建属性节点。
(不使⽤)Element对象:操作Element对象的属性:获取属性:getAttribute(name);⽅法设置属性:setAttribute(name,value)⽅法。
删除属性:removeAttribute(name);⽅法。
在Element对象中查找Element对象:在Element对象的范围内,可以⽤来查找其他节点的唯⼀有效⽅法就是getElementsByTagName()⽅法。
⽽该⽅法返回的是⼀个集合。
Element对象的⼀个案例:在⼀个<ul></ul>标签下创建⼀个li标签[html]1. <body>2. <ul id="city">3. <li id="bj" name="beijing">北京</li>4. <li id="tj" name="tianjin">天津</li>5. </ul>6. <script type="text/javascript">7. //创建⼀个标签元素8. var liElment = document.createElement("li");9. //创建⼀个⽂本节点10. var textElement = document.createTextNode("上海");11. //将⽂本节点加到标签元素下⾯12. liElment.appendChild(textElement);13. //为标签元素创建属性14. liElment.setAttribute("id","sh");15. liElment.setAttribute("name","Shanghai");16. //将标签元素加到ul标签下17. document.getElementById("city").appendChild(liElment);18. </script>19. </body>Node对象包含:节点名称,值和类型。
js中getElementById的用法
getElementById 的用法:顾明思义,get-Element-By-Id,就是通过ID来设置/返回HTML标签的属性及调用其事件与方法。
用这个方法基本上可以控制页面所有标签,条件很简单就是给每个标签分配一个ID号返回具有指定 ID 属性值的第一个对象的一个引用。
语法Element = document.getElementById(“id”)获得ID值=id的所有属性和方法Js中经常使用它通过控件ID取得元素的值,如一个form里包含text、label 等,他们都是FORM的元素,有一个分配的ID,getElementById()是取得这些元素的text值的。
例子:1、<html><head><title>getElementById </title><script language = "javascript">function change(){document.getElementById('mr').innerHtml="金山123";document.getElementById('mr').href="/";}</script></head><body><a id="mr" href="/" >百度</a><form name="myform"><input type="button" value="更换连接" onClick="change()" /> </form></body></html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">2、<html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;charset=gb2312" /><title>无标题文档</title><script language="javascript">function reset(){var divTest = document.getElementById('divTest');divTest.innerHTML = "这是一个有感觉的标记";}function s(){var divTest = document.getElementById('divTest');divTest.innerHTML = "老鼠来了";}</script></head><body><h1 id="divTest" onmousemove="s()" onmouseout="reset()"align="center">这是一个有感觉的标记</h1></body></html>3、<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script language="javascript"><!--var n=0;function changefontcolor(){n=n%4;switch(n){case 0:main_title.color="red";break;case 1:main_title.color="green";break;case 2:main_title.color="blue";break;case 3:main_title.color="yellow";}n++;}//定时执行函数每秒钟调用changefontcolor()函数一次,改变大标题的颜色setInterval("changefontcolor()",1000);//--></script></head><font ID=main_title size=6><b>虚拟网络世界</b></font><body></body></html>4、<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script language="javascript"><!--var r;function showNextNum(){var m_num=Math.floor(Math.random()*(3000-1000))+1000;num.innerHTML=m_num;}function showCapture(){clearTimeout(r);}//--></script></head><body onKeypress="showCapture()"><h1 ID="num" align="center">0000</h1> <script language="javascript"><!--r=setInterval("showNextNum()",100);//--></script></body></html>。
input和document.getelementbyid的用法
这里我们简要介绍 JavaScript 中 `input` HTML元素和 `document.getElementById` 函数的用法。
`input` 是一个非常常见的 HTML 元素,用于创建交互式表单中的输入字段。
它有很多类型(type),例如 text、password、email、checkbox、radio 等。
例如:<form><label for="username">用户名:</label><input type="text" id="username"><label for="password">密码:</label><input type="password" id="password"><input type="submit" value="登录"></form>`document.getElementById` 是 JavaScript 中的一个方法,用于通过元素的 ID 属性获取HTML 页面上的元素。
当获取到该元素后,可以用此引用进行进一步的操作,例如更改其属性或内容。
例如:// 通过元素的 ID 获取一个 input 元素var usernameInput = document.getElementById("username");// 修改 input 元素的 value 属性usernameInput.value = "JohnDoe";// 给 input 元素绑定一个事件监听器usernameInput.addEventListener("change", function(){console.log("The value of the username field has changed.");});在这个例子中,我们首先通过调用 `document.getElementById` 方法与 ID 为 "username" 的 input 元素建立了联系。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
* 这个函数中最关键的地方是 document.getElementById ,他是什么呢? *
* *
如果无符合条件的对象,则返回 null 。
B :有一个例子可以很好的说明:
****************************************************************************
* *
C :另外还得到一个细节:
① document.getElementById 有时会抓 name 放过了 id ,据说是 IE 的一个 BUG ;
页面中有
<input type="hidden" value="2" />
<select >
* var idtext=document.getElementById('hdrPageHeader_lblTitle') *
* alert(idtext.innerText) *
是具体的值!
参考资料:
1. document . getElementById 的用法和 DHTML.CHM 的下载地址
今天在网络上查找 document . getElementById 的用法,如下:
A : 语法:
oElement = document . getElementById ( sID )
* //--> *
* </script> *
getElementsByTagName
获取基于指定元素名称的对象集合。
* <a >aa</a> *
* <a >bb</a> *
* <a >cc</a> *
一个是 一个是
用 document.getElementById 取第二个,可是,取到的却是第一个 >
在 IE 中 getElementById 竟然不是先抓 id 而是先找 name 相同的物件 ...
兩個 form, 每個 form 有兩個 teid 都不同 ...
* 如: document.getElementById('hdrPageHeader_lblTitle') *
* *
document.getElementById详解2007-08-31 00:29
document.getElementById(" ") 得到的是一个对象,用 alert 显示得到的是
“ object ”,而不是具体的值,它有 value 和 length 等属性,加上 .value 得到的才
方法:
focus
使得元素得到焦点并执行由 onfocus 事件指定的代码。
getElementById
获取对 ID 标签属性为指定值的第一个对象的引用。
getElementsByName
根据 NAME 标签属性的值获取对象的集合。
getElementsByTagName
這樣在 Firefox 是沒問題的 ... 但在 IE 卻只抓得到第一個出現的 name 資料
2. document 对象
/man/dhtmlcn/objects/obj_document.html
属性: title ; bgColor ; url; ( 使用: document.title)
* <script language="javascript"> *
* <!-- *
* 表示的意思是:获取 ID 为 :hdrPageHeader_lblTitle 的对象 *
* *
参数:
sID : 必选项。字符串 (String) 。
返回值:
oElement : 对象 (Element) 。
说明:
根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象 ,则返回该组对象中的第一个。
* 关于 document.getElementById ,是这样的: *
* *
获取基于指定元素名称的对象集合。
方法:
focus
使得元素得到焦点并执行由 onfocus 事件指定的代码。
getElementById
获取对 ID 标签属性为指定值的第一个对象的引用。
getElementsByName
根据 NAME 标签属性的值获取对象的集合。