DOM访问HTML元素

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>DOM访问HTML元素</title>
    <script type="text/javascript">
        function showContent() {
            //通过document对象操作DOM树
            //document对象通过id获取一个元素
            var div = document.getElementById("my_div");
            var content = document.getElementById("content");
            var name = document.getElementById("name");
            //拿到元素后,可以获取里面的内容
            //如果获取一个元素内容部分的东西:.innerHTML
            //获取表单元素的value值:.value
            alert(div.innerHTML);
            alert(content.value);
            alert(name.value);
        }
    </script>
</head>
<body>
<div id="my_div">我的div块</div>
<textarea id="content" rows="3" cols="25">
    好好学习,天天向上!
</textarea><br/>
<input id="name" type="text" value="mary"/><br/>
<input type="button" id="btn_show" value="访问3个元素的内容" onclick="showContent()"/>
</body>
</html>

  

时间: 2024-08-08 09:41:24

DOM访问HTML元素的相关文章

DOM访问HTML元素2

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>DOM访问HTML元素</title> <script type="text/javascript"> function showContent(){ var n3 = document.getElementById(&quo

DOM访问HTML元素的方式,DOM访问表单控件的常用属性和方法,DOM访问列表框、下拉菜单的常用属性,DOM访问表格子元素的常用属性和方法,DOM对HTML元素的增删改操作

DOM访问HTML元素的方式 为了动态地修改HTML元素,须先访问HTML元素.DOM主要提供了两种方式来访问HTML元素: 根据ID访问HTML元素:通过document对象调用getElementById()方法来查找具有唯一id属性值的元素. 利用节点关系访问HTML元素.常用的属性和方法如下: parentNode 返回当前节点的父节点 previousSibling 返回当前节点的前一个兄弟节点 nextSibling 返回当前节点的后一个兄弟节点 childNodes 返回当前节点的

5.DOM访问表格元素

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function showTableInfo() { var table = document.getElementById("myt

动态创建并访问网页元素

最近在做OCX控件,但这个控件并不是一打开网页就需要初始化的,而是根据需要动态创建:在控件初始化的时候需要在控件内部获取其在网页中的DOM对象:并且创建之后需要立刻调用控件的方法. 最开始的方法如下: 1 var ctrl = document.createElement('object'); 2 ctrl.classid = 'CLSID:DCC16727-7A51-47B4-B38E-B020EAAF0584'; 3 document.body.appendChild(ctrl); 这个方法

DOM操作HTML元素属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM操作HTML元素属性</title> </head> <body> <ul> <li></li> <li></li> <li></li> <

Struts2学习之路(五)—— 访问web元素

以下是Action类中访问web元素的示例,共有四种方法.其中第一种和第三种依赖容器,第二种和第四种利用IOC思想.前面两种取得Map类型的request.session.application:后面两种是真实类型HttpServletRequest.HttpServletSession.ServletContext的引用. 1.第一种方法: 1 package com.user.action; 2 3 import java.util.Map; 4 5 import com.opensymph

Javascript:DOM动态创建元素实例应用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Dom:动态创建元素</title> </head> <body> <ul id="demo1"> </ul> <input type="text" id=&quo

DOM: 如何获取元素下的第一个子元素

Element.firstChild ?,是的,这是第一种方法,当然,通常来说支持 W3C 规范的浏览器,如 Firefox 等取到的应该是 TEXT_NODE.很早之前,或者说现在最流行的方法可能是: // 让我们假设要将它抽象出来,变成一个 util 对象的方法 var util = {}; util.first = function(element) { if(!element) return; var first= element.firstChild; // 处理 w3c 浏览器中第一

JavaScript获取DOM节点HTML元素CSS样式

JavaScript获取DOM节点HTML元素CSS样式技术 maybe yes 发表于2015-01-10 18:07 原文链接 : http://blog.lmlphp.com/archives/59  来自 : LMLPHP后院 如何使用 JavaScript 获取某个 DOM 节点下 HTML 元素的 CSS 样式值?使用过 JQuery 的童鞋一定都非常的熟悉,Jquery 提供了非常强大的 CSS 方法,可以很方便的设置和获取元素的 style 属性. 某些情况下,我们不能使用 JQ