DOM-document 对象

Document 对象
Document 对象代表整个HTML 文档，可用来访问页面中的所有元素。
Document 对象是 Window 对象的一个部分，可通过 window.document 属性来访问。

Document 对象的常用方法

1、getElementById(id)

通过元素的ID访问元素，这是DOM一个基础的访问页面元素的方法，我们要经常用到它.

例如下面的例子，我们可以同DIV的ID迅速的访问到它，而不必通过DOM层层遍历，

<body>

Just for testing;

</div>

Just for testing;

</div>

var div=document.getElementById(‘divid’);

alert(div.nodeName);

</script>

</body>

注意使用这个函数时如果元素的ID不是唯一的，那么会获得第一个符合条件的元素。

在IE6中如果input、checkbox,radio. 等元素name匹配指定的ID，也会被访问到

例如下面的例子中，获得的元素是input：

<body>

Just for testing;

</div>

var div=document.getElementById('divid');

alert(div.nodeName);

</script>

</body>

2、getElementsByName(name)

返回名字是name的元素数组，在IE6中元素ID匹配这个名字的话，这个元素也将包括在内，而且getElementsByName()仅用于象input,radio,checkbox等元素对象。

象下面例子中georges数组的长度应该是0。

<body>

var georges=document.getElementsByName("george");

alert(georges.length);

</script>

</body>

3、getElementsByTagName(tagname)

getElementByTagName可以用于DOCUMENT也可以用元素。getElementsByTagName返回具有指定tagname的子元素列表（数组）。你可以遍历这个数组获得每一个单独的子元素。当处理很大的DOM结构，使用这种方法可以很容易的所有缩小范围。

<html>

<head>

function start() {

// 获得所有tagName是body的元素（当然每个页面只有一个）

myDocumentElements=document.getElementsByTagName("body");

myBody=myDocumentElements.item(0);

// 获得body子元素种的所有P元素

myBodyElements=myBody.getElementsByTagName("p");

// 获得第二个P元素

myP=myBodyElements.item(1);

//显示这个元素的文本

alert(myP.firstChild.nodeValue);

}

</script>

</head>

<p>hello</p>

</body>

</html>

DOM Element 常用方法

1、appendChild(node)

向当前节点对象的追加节点。经常用于给页面动态的添加内容。

例如下面给div添加一个文本节点：

var newdiv=document.createElement("div")

var newtext=document.createTextNode("A new div")

newdiv.appendChild(newtext)

document.getElementById("test").appendChild(newdiv)

</script>

上面的例子中给DIV添加文本，也可以用newdiv.innerHTML=”A new div”实现，

不过innerHTML不属于DOM

2、removeChild(childreference)

移除当前节点的子节点，返回被移除的节点。这个被移除的节点可以被插入document树中别的地方

<div id="father"><div id="child">A child</div></div>

var childnode=document.getElementById("child")

var removednode=document.getElementById("father").removeChild(childnode)

</script>

3、cloneNode(deepBoolean)

复制并返回当前节点的复制节点，这个复制得到的节点是一个孤立的节点，不在document树中。复制原来节点的属性值，包括ID属性，所以在把这个新节点加到document之前，一定要修改ID属性，以便使它保持唯一。当然如果ID的唯一性不重要可以不做处理。

这个方法支持一个布尔参数，当deepBoolean设置true时，复制当前节点的所有子节点，包括该节点内的文本。

p=document.getElementById("mypara")

pclone = p.cloneNode(true);

p.parentNode.appendChild(pclone);

4、replaceChild(newChild, oldChild)

把当前节点的一个子节点换成另一个节点

例如：

var oldel=document.getElementById("innerspan");

var newel=document.createElement("p");

var text=document.createTextNode(“ppppp”);

newel.appendChild(text);

document.getElementById("adiv").replaceChild(newel, oldel);

</script>

5、insertBefore(newElement, targetElement)

给当前节点插入一个新节点，如果targetElement被设置为null，那新节点被当作最后一个子节点插入，否则那新节点应该被插入targetElement之前的最近位置。

<body>

<span id="lovespan">熊掌我所欲也!</span>

</body>

var lovespan=document.getElementById("lovespan")

var newspan=document.createElement("span")

var newspanref=document.body.insertBefore(newspan, lovespan)

newspanref.innerHTML="鱼与";

</script>

6、click()

执行元素的一次点击，可以用于通过脚本来触发onClick函数

function wow() {

alert("我好象没有点鼠标啊");

}

</script>

var div = document.getElementById("test");

div.click();

</script>

DOM Element的属性:

1、childeNodes 返回所有子节点对象,

例如

<tr><td>一个和尚有水喝。</td></tr>

<tr><td>两个和尚挑水喝。</td></tr>

<tr><td>三个和尚没水喝。</td></tr>

</table>

var msg=””

var mylist=document.getElementById("mylist")

for (i=0; i<mylist.childNodes.length; i++){

var tr=mylist.childNodes[i];

for(j=0;j<tr.childNodes[j].length; j++) {

var td=tr.childNodes[j];

msg+=td.innerText;

}

alert(msg);

</script>

2、innerHTML

这是一个事实上的标准，不属于w3c DOM，但是几乎所有支持DOM的浏览器，都支持这个属性。通过这个属性我们很容易修改一个元素的HTML。

window.onload=function(){

document.getElementsByTagName("p")[0].innerHTML="<b>新新人类，什么？！</b>"

}

</script>

3、style

返回一个元素的style对象的引用，通过它我们可以获得并修改每个单独的样式。

例如下面的脚本可以修改一个元素的背景色

document.getElementById("test").style.backgroundColor="yellow"

4、firstChild 返回第一个子节点

5、lastChild 返回最后一个子节点

6、parentNode 返回父节点的对象。

7、nextSibling 返回下一个兄弟节点的对象

8、previousSibling 返回前一个兄弟节点的对象

9、nodeName 返回节点的HTML标记名称，使用英文的大写字母，如P, FONT

例如

if (document.getElementById("test").nodeName=="DIV")

alert("This is a DIV");

</script>

第一个例子：

使用DOM1.0 的javascript动态地创建一个HTML table。

<head>

<title>Sample code </title>

function start() {

//获得body的引用

var mybody=document.getElementsByTagName("body").item(0);

//创建一个<table></table>元素

mytable = document.createElement("TABLE");

//创建一个<TBODY></TBODY>元素

mytablebody = document.createElement("TBODY");

// 创建行列

for(j=0;j<3;j++) {

//创建一个<TR></TR>元素

mycurrent_row=document.createElement("TR");

for(i=0;i<3;i++) {

//创建一个<TD></TD>元素

mycurrent_cell=document.createElement("TD");

//创建一个文本元素

currenttext=document.createTextNode("cell is row "+j+", column "+i);

//把新的文本元素添加到单元TD上

mycurrent_cell.appendChild(currenttext);

// appends the cell TD into the row TR

//把单元TD添加到行TR上

mycurrent_row.appendChild(mycurrent_cell);

}

//把行TR添加到TBODY上

mytablebody.appendChild(mycurrent_row);

}

// 把 TBODY 添加到 TABLE

mytable.appendChild(mytablebody);

// 把 TABLE 添加到 BODY

mybody.appendChild(mytable);

// 把mytable的border 属性设置为2

mytable.setAttribute("border","2");

}

</script>

</head>

</body>

</html>

首先，我们创建一个table元素

接着，创建一个TBODY元素，它应该是TABLE元素的子元素，但是现在现在它之间没有联系。接着，使用一个循环创建TR元素，它们应该是TBODY元素的子元素。对于每一个TR，我们使用一个循环创建TD元素，它们是TR的子元素。对于每一个TD，我们创建一个文本节点元素现在，我们创建好了这些TABLE, TBODY, TR, TD还有文本元素，但是它们之间的层级关系并没有建立起来。然后我们以上相反的顺序把每一个对象添加到它的父节点上。

mycurrent_cell.appendChild(currenttext);

mycurrent_row.appendChild(mycurrent_cell);

mytablebody.appendChild(mycurrent_row);

mytable.appendChild(mytablebody);

DOM-document 对象的更多相关文章

HTML DOM Document 对象
HTML DOM Document 对象 HTML DOM 节点在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点: 文档是一个文档. 所有的HTML ...
JavaScript -- 时光流逝（十一）：DOM -- Document 对象
JavaScript -- 知识点回顾篇(十一):DOM -- Document 对象 (1) document.activeElement: 返回文档中当前获得焦点的元素. <!doctype ...
浏览器端-W3School-JavaScript-HTML DOM：HTML DOM Document 对象
ylbtech-浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Document 对象 1.返回顶部 1. HTML DOM Document 对象 Docume ...
HTML DOM Document对象元素对象属性对象事件对象
DOM Document对象 DOM 元素对象 DOM 属性对象 DOM 事件菜鸟教程上总结挺全的,就不多废话,链接点进去即可.. 后期对经常用到的会在此更新一些总结..... 开学了...自 ...
javascript DOM document对象
document对象代表整个html文档用来访问页面所有元素最复杂的一个dom对象也是window对象的一个子对象. 对于dom编程中,一个html就会当成一个dom树dom会把所有的html元素 ...
JavaScript之HTML DOM Document 对象
文档对象代表您的网页. 如果您希望访问 HTML 页面中的任何元素,那么您总是从访问 document 对象开始. 下面是一些如何使用 document 对象来访问和操作 HTML 的实例. 查找 H ...
HTML DOM 知识点整理（一）—— Document对象
一.DOM对象 DOM对象整体包括: HTML DOM Document对象 HTML DOM 元素对象 HTML DOM 属性对象 HTML DOM 事件对象 HTML DOM Console 对象 ...
DOM Document
1.DOM Document对象定义:每个载入浏览器的 HTML 文档都会成为 Document 对象.Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. Docume ...
org.w3c.dom document 和xml 字符串互转
转自:https://blog.csdn.net/wmyasw/article/details/8686420 package com.mymhotel.opera; import java.io.F ...
报表软件JS开发引用HTML DOM的location和document对象
上一次提到,在报表软件FineReport的JavaScript开发中,可以访问并处理的HTML DOM对象有windows.location.document三种.这次就继续介绍后两种,locati ...

随机推荐

java中的char,short,int,long占几个字节
1:“字节”是byte,“位”是bit : 2: 1 byte = 8 bit : char 在java中是2个字节.java采用unicode,2个字节(16位)来表示一个字符. short 2个字 ...
leetcode 441.排列硬币（python）
1.题目描述你总共有 n 枚硬币,你需要将它们摆成一个阶梯形状,第 k 行就必须正好有 k 枚硬币. 给定一个数字 n,找出可形成完整阶梯行的总行数. n 是一个非负整数,并且在32位有符号整型的范 ...
Vue知识整理11：列表渲染（v-for来实现）
简单的v-for结构显示迭代数据通过value别名显示下面各个属性值通过index 和key获取同类数组索引,或者不同属性的key属性名
python学习笔记：（五）列表与元组的异同
在python中最基本的数据结构是序列(sequence),每一个元素被分配一个序号,即元素的位置,也称为索引,第一个索引是0,第二个则是1 元组与列表最大的区别就是: 元组不能更改:列表可以修改 p ...
自动爬取代理IP例子
import time import json import datetime import threading import requests from lxml import etree from ...
jQuery 获取设置图片 src 的路径
1.获取: $('#img')[0].src 2.设置:$('#img').attr("src", data.CodeUrl);
20191112 Spring Boot官方文档学习（4.4）
4.4.日志 Spring Boot使用Commons Logging进行所有内部日志记录,但是使底层日志实现打开状态.为Java Util Logging,Log4J2和Logback提供了默认配置 ...
centos7 VM虚拟机在主机关机重启后，无法ping通
解决办法 1.虚拟机的某些网络相关的服务没有启动,打开电脑的服务启动相关服务 2.打开虚拟机的虚拟网络设置,恢复默认设置即可 3.判定虚拟网卡的网关和centos的网关是否一致,如果不一致,改成一致, ...
Redis为什么不能使用一主一从哨兵
哨兵机制识别挂掉的主节点 quorum(法定人数) 是判定主节点不能访问所需要的最少哨兵数量执行失效备援perform a failover 其中一个哨兵需要被选为救援的领导,并被授权执行救援,而 ...
CentOS7 内核模块管理
1.查看所有模块:lsmod 2.查看指定模块的详细信息:modinfo 模块名 3.动态加载模块:modprobe 模块名 4.动态卸载模块:modprobe -r 模块名 5.开机自动加载模块:假 ...

DOM-document 对象

DOM-document 对象的更多相关文章

随机推荐

热门专题