javascript html dom,javascript 操作 HTML DOM
主要概述一些有用的基础的DOM的方法以及怎样用使用javascript使用它们。
可以实现比如动态地新建控制移动HTML元素。
Document 对象的常用方法
1、getElementById(id)
通过元素的ID访问元素,这是DOM一个基础的访问页面元素的方法,我们要经常用到它.
例如下面的例子,我们可以同DIV的ID迅速的访问到它,而不必通过DOM层层遍历,
h
Just for testing;
Just for testing;
var div=document.getElementById(‘divid’);
alert(div.nodeName);
注意使用这个函数时如果元素的ID不是唯一的,那么会获得第一个符合条件的元素。
在IE6中如果input、checkbox,radio. 等元素name匹配指定的ID,也会被访问到
例如下面的例子中,获得的元素是input:
Just for testing;
var div=document.getElementById('divid');
alert(div.nodeName);
2、getElementsByName(name)
返回名字是name的元素数组,在IE6中元素ID匹配这个名字的话,这个元素也将包括在内,而且getElementsByName()仅用于象input,radio,checkbox等元素对象。
象下面例子中georges数组的长度应该是0。
var georges=document.getElementsByName("george");
alert(georges.length);
3、getElementsByTagName(tagname)
getElementByTagName可以用于DOCUMENT也可以用元素。getElementsByTagName返回具有指定tagname的子元素列表(数组)。你可以遍历这个数组获得每一个单独的子元素。当处理很大的DOM结构,使用这种方法可以很容易的所有缩小范围。
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);
}
hi
hello
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)
上面的例子中给DIV添加文本,也可以用newdiv.innerHTML=”A new div”实现,
不过innerHTML不属于DOM
2、removeChild(childreference)
移除当前节点的子节点,返回被移除的节点。这个被移除的节点可以被插入document树中别的地方
var childnode=document.getElementById("child")
var removednode=document.getElementById("father").removeChild(childnode)
3、cloneNode(deepBoolean)
复制并返回当前节点的复制节点,这个复制得到的节点是一个孤立的节点,不在document树中。复制原来节点的属性值,包括ID属性,所以在把这个新节点加到document之前,一定要修改ID属性,以便使它保持唯一。当然如果ID的唯一性不重要可以不做处理。
这个方法支持一个布尔参数,当deepBoolean设置true时,复制 当前节点的所有子节点,包括该节点内的文本。
11111
p=document.getElementById("mypara")
pclone = p.cloneNode(true);
p.parentNode.appendChild(pclone);
var oldel=document.getElementById("innerspan");
var newel=document.createElement("p");
var text=document.createTextNode(“ppppp”);
newel.appendChild(text);
document.getElementById("adiv").replaceChild(newel, oldel);
5、insertBefore(newElement, targetElement)
给当前节点插入一个新节点,如果targetElement被设置为null,那新节点被当作最后一个子节点插入,否则那新节点应该被插入targetElement之前的最近位置。
熊掌我所欲也!
var lovespan=document.getElementById("lovespan")
var newspan=document.createElement("span")
var newspanref=document.body.insertBefore(newspan, lovespan)
newspanref.innerHTML="鱼与";
function wow() {
alert("我好象没有点鼠标啊");
}
var div = document.getElementById("test");
div.click();
DOM Element的属性:(下面是常用的。IE5.0以上,mozllia都支持的)
1、childeNodes 返回所有子节点对象,
例如
一个和尚有水喝。 |
两个和尚挑水喝。 |
三个和尚没水喝。 |
var msg=””
var mylist=document.getElementById("mylist")
for (i=0; i
var tr=mylist.childNodes[i];
for(j=0;j
var td=tr.childNodes[j];
msg+=td.innerText;
}
}
alert(msg);
2、innerHTML
这是一个事实上的标准,不属于w3c DOM,但是几乎所有支持DOM的浏览器,都支持这个属性。通过这个属性我们很容易修改一个元素的HTML。
新人类,什么?!
window.οnlοad=function(){
document.getElementsByTagName("p")[0].innerHTML="新新人类,什么?!"
}
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");
第一个例子:
使用DOM1.0 的javascript动态地创建一个HTML table。
Sample code
function start() {
//获得body的引用
var mybody=document.getElementsByTagName("body").item(0);
//创建一个
元素
mytable = document.createElement("TABLE");
//创建一个
元素
mytablebody = document.createElement("TBODY");
// 创建行列
for(j=0;j<3;j++) {
//创建一个
元素
mycurrent_row=document.createElement("TR");
for(i=0;i<3;i++) {
//创建一个
元素
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");
}
javascript html dom,javascript 操作 HTML DOM相关推荐
- [react] 什么是虚拟dom?虚拟dom比操作原生dom要快吗?虚拟dom是如何转变成真实dom并渲染到页面的?
壹 ❀ 引 虚拟DOM(Virtual DOM)在前端领域也算是老生常谈的话题了,若你了解过vue或者react一定避不开这个话题,因此虚拟DOM也算是面试中常问的一个点,那么通过本文,你将了解到如下 ...
- JavaScript 操作 HTML DOM (文档对象模型) 相关知识点
HTML DOM 树 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML. JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页 ...
- html鼠标离开点击停留,Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)...
本文实例总结了Javascript DOM事件操作.分享给大家供大家参考,具体如下: 使用JavaScript可以对HTML页面上的各种事件进行监听,如鼠标点击/释放,鼠标悬停/离开,等等. 效果图: ...
- 前端JavaScript之DOM事件操作~都是干货
下面是对DOM操作事件的整理,希望可以帮助到有需要的小伙伴~ 文章目录 DOM事件操作 JavaScript的基础 事件 代码书写步骤 1.获取绑定事件的元素 2.绑定事件 3.编写事件 注意事项 D ...
- JavaScript知识点整理(十三)- DOM -(2)操作元素
目录 一.改变元素内容 1.1 innerText 和 innerHTML 区别 二.常用元素的属性操作 2.1 案例练习 - 修改元素属性 src 2.2 案例练习 分时显示不同图片,显示不同问候语 ...
- 【JavaScript总结】JavaScript语法基础:DOM
->DOM的理解:文档对应dom树 ->有了DOM能做什么:DOM的操作 html文档做为DOM树模型,DOM树的节点就是对象.对象会触发事件来执行一些事件代码. C#中的事件是一个委托变 ...
- JavaScript快速入门(六)——DOM
概念扫盲 DOM DOM是 Document Object Model(文档对象模型)的缩写,是W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: "W3C ...
- 6、JavaScript进阶篇③——浏览器对象、Dom对象
一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...
- JavaScript学习笔记05【高级——DOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
- JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
最新文章
- RemoveError: ‘requests‘ is a dependency of conda and cannot be removed from
- Linux学习之一-从三个重要人物的故事和一张思维导图说起
- cmi编码用c语言实现,CMI编码与解码
- Java模拟事务Demo
- 小学计算机表格制作教学,小学计算机年度教学工作计划表格(四篇).docx
- android基础开发 书,Android 开发基础
- 自动完成文本框AutoCompleteTextView
- [BZOJ 2111][ZJOI2010]Perm 排列计数(Lucas定理)
- python编程是干嘛的-python编程能做什么开发
- halcon学习之阈值分割(threshold、binary_threshold、dyn_threshold、var_threshold、auto_threshold、fast_threshold、)
- 安全微软微软安全新闻聚焦-双周刊第三十二期
- Android茶叶进销存源码分享
- curl实现自动重启飞鱼星VW1900路由器
- VUzzer: Application-aware Evolutionary Fuzzing
- 行列式在计算机的应用,行列式的计算机及应用.doc
- SpringDataJPA教程 三种配置方式
- 赠书 002丨文化改变脑,是玄学?
- 知识图谱核心技术(一):知识图谱的概述
- 认知学派用计算机来比拟人,心理学基础习题答案
- JavaCV-学习笔记一
热门文章
- WIN7 64位系统安装JDK并配置环境变量
- IOS开发之JSON文件的读写
- python 服务端与c++客户端通讯_在C++与Python之间通信(IPC)
- spring cloud eureka 服务之间调用_Spring-cloud微服务实战【一】:微服务的概念与演进过程...
- 命令执行——命令执行漏洞及(四)
- SOL注入——HTTP头部注入(2)(七)
- java 7 发布,【UC浏览器】Java平台7.0正式版发布啦
- element-ui中el-drawer组件打开自动聚焦问题
- AppStore发布产品步骤
- 使用事件和消息队列实现分布式事务