javascript之dom编程(1):简单用法

一:基本案例

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

当前时间:

<span id="myspan">----</span><br/>

<input onclick="test1();" type="button" value="开新窗口"/>

</body>

<script type="text/javascript">

//html  dom编程

//每个html文件的元素都会被当做一个Node节点对象来看待,

<!--读10秒自动停止,并弹出一句话"hello.wrold时间停止"-->

var i=0;

var myspan=document.getElementById("myspan");

function abc(){

var mytime=new Date();

//对象.innterText表示在该对象对应标签的中间放入文本

myspan.innerText=mytime.toLocaleString();

if(++i==10){

window.clearInterval(mytime2);

window.alert("hello,world,时间停止");

}

}

//做了一个定时器

var mytime2=window.setInterval("abc()",1000 );

//第二个参数可以指定,是替换本窗口(_self),还是开窗口(_blank 默认)

//第三个参数可以指定新窗口的样式.

function test1(){

window.open("newwindow.html","_blank","width=300,height=300,toolbar=yes,titlebar=yes,status=yes,location=yes,resizable=yes");

}

</script>

</html>

二:两个html页面之间互相通信

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<input onclick="test1()" type="button" value="开新窗口"/>

<input type="text" id="myinfo" />

<input type="button" onclick="test2()" value="发送给子窗口"/>

</body>

<script type="text/javascript">

var newwindow="";

function test1(){

newwindow=window.open("a.html");

}

function test2(){

//取出用户发送给子窗口的信息

var my_text=document.getElementById("myinfo");

var child_text=newwindow.document.getElementById("myinfo");

child_text.value=my_text.value;

}

</script>

</html>

a.html

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<script type="text/javascript">

function send(){

var chlid_text=document.getElementById("myinfo2");

//opener表示该页面的父窗口

opener.document.getElementById(‘myinfo‘).value=chlid_text.value;

}

</script>

<body>

<h1>我是b.html页面</h1>

接收消息

<input type="text" id="myinfo"/>

<hr/>

发送消息

<input type="text" id="myinfo2"/>

<input type="button" value="送给父窗口" onclick="send()"/>

</body>

</html>

后面会对html元素逐个更新。

版权声明:博主原创文章,转载请说明出处。http://blog.csdn.net/dzy21

时间: 2024-10-06 01:35:05

javascript之dom编程(1):简单用法的相关文章

JavaScript之DOM编程

今天看了web 前端的一些知识,JavaScript的DOM编程笔记如下: 1. 节点及其类型: 1). 元素节点 2). 属性节点: 元素的属性, 可以直接通过属性的方式来操作. 3). 文本节点: 是元素节点的子节点, 其内容为文本. 2. 在 html 文档的什么位置编写 js 代码? 0). 直接在 html 页面中书写代码. <button id="button" onclick="alert('hello world');">Click Me

高性能Javascript(2) DOM编程

第三部分 DOM编程 文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM APIs主要用于访问这些文档中的数据.尽管DOM是与语言无关的API,在浏览器中的接口却是以JavaScript实现的.客户端大多数脚本程序与文档打交道,DOM就成为JavaScript代码日常行为中重要的组成部分. 2.1 DOM Access and Modification  DOM访问和修改

(3)JavaScript 之 DOM编程

DOM 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来.DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容. 一.查找元素(选择器) 1.直接查找 document.getElementById             根据ID获取一个标签 document.getElementsByN

高性能JavaScript(DOM编程)快速响应的用户界面

浏览器UI线程 用于执行JavaScript代码和更新界面的进程被称为 “浏览器UI线程” . UI线程的工作基于一个简单的队列系统,任务会被保存到队列中直到线程空闲,一旦空闲队列就被重新提取出来运行.这些任务要么是运行JavaScript代码,要么是执行UI更新,包括重绘和重排.浏览器每一次执行JavaScript代码或者响应用户事件,都可能会导致一个或多个任务加入队列. function handleClick(){ //创建div元素 var div = document.createEl

JavaScript的DOM编程--11--插入节点

插入节点: 1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面 var reference = element.insertBefore(newNode,targetNode); 节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面. 节点 targetNode 必须是 element 元素的一个子节点. 1 <!DOCTYPE html> 2 <html lang="en"

JavaScript的DOM编程--02--获取元素节点

如何来获取元素节点: 1) .document.getElementById: 根据 id 属性获取对应的单个节点 2) .document.getElementsByTagName: 根据标签名获取指定节点名字的数组, 数组对象 length 属性可以获取数组的长度 3) .document.getElementsByName: 根据节点的 name 属性获取符合条件的节点数组, 但 ie 的实现方式和 W3C 标准有差别: 在 html 文档中若某节点(li)没有 name 属性, 则 ie

JavaScript的DOM编程--03--读写属性节点

读写属性节点: 1)可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值 2)通过元素节点的 getAttributeNode 方法来获取属性节点, 然后在通过 nodeValue 来读写属性值 1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 <title>Untitl

JavaScript的DOM编程--05--两个实验

1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 <title>Untitled Document</title> 5 6 <script type="text/javascript"> 7 window.onload = function(){

JavaScript的DOM编程--04--获取文本节点

获取文本节点: 1). 步骤: 元素节点 --> 获取元素节点的子节点 2). 若元素节点只有文本节点一个子节点, 例如 <li id="bj" name="BeiJing">北京</li>, <p>你喜欢哪个城市?</p>, 可以先获取到指定的元素节点 eleNode, 然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值 1 <html> 2 <he