网站首页 > 技术文章 正文
文档对象模型(Document Object Model,DOM)是一种抽象化表示网页的方法,文档是以树形结构表示的。
Document节点分为父节点(parentNode)、子节点(childNode)、兄弟节点(siblingNode)等。
BOM(浏览器对象模型)因为没有一个标准来定义浏览器的功能,所以不同的浏览器有不同的属性和方法。DOM则不然,有专门定义HTML(或XML)页面中的对象应该如何表示的标准。开发人员可以使用DOM操作或查找网页中的某项内容,尤其是表单、图片、定位元素。
1 查询或访问的方法
当HTML文档加载完成后,浏览器将会将其表示成树形结构,页面上的所有元素都是对象树中的对象。如JS在处理表单时,会根据其在文档中出现的次序为所有表单创建一个数组。document.forms[0]用来表示第一个表单。同样,页面上所有的图片、链接和锚点都会以其名字存储在数组中,例如document.images、document.links、document.anchors[]等。
1.1 数组通过名字或索引
如文档中有一个表单,名字是form1,那么就可以通过它的名字来访问它,即document.forms["form1"],也可以使用索引值来访问它,即document.forms[n].
1.2 通过document方法的name属性
document.getElementByTagName();
1.3 通过document方法的ID属性
document.getElementById();
2 DOM的修改
window.onload=function(){
var divObj = document.getElementById("divtest");
divObj.innerHTML = "Inserting new text in the div container!";
}
3 DOM的追加
window.onload=function(){
var para = document.createElement("p");
var divObj = document.getElementById("divtest");
divObj.appendChild(para);
var txt = document.createTextNode("Hope this work!");
para.appendChild(txt);
}
4 DOM节点的插入
document.body.insertbefore(newPara, firstPara);
5 为DOM节点创建属性
var headings = document.getElementsByTagName("h4");
headings[0].setAttribute("id", "firsth4");
6 DOM的复制
newPara = oldPara.cloneNode(true);
7 DOM的删除
parentDiv1.removeChild(div2);
补充:
document.write()方法
可以写入全部的文档代码,包括HTML、CSS乃至JS。
-End-
猜你喜欢
- 2024-10-25 《王牌部队》高粱拿了“喜剧人”剧本,笑点泪点都被他承包了
- 2024-10-25 纯爱小说推荐|生活所迫,我只能把你的后宫变成我的兄弟了
- 2024-10-25 占星秒懂|宫位的形成与解析(下) 宫位意思
- 2024-10-25 农村兄弟建双拼更有气势还省钱,2020年超受欢迎的双拼户型分享
- 2024-10-25 我爸说,“你没有结婚,我在村子里比做贼还丢人!”
- 2024-10-25 「漫步计算机系统」之数据结构与算法(18):红黑树结点的删除
- 2024-10-25 IT兄弟连 HTML5教程 CSS3揭秘 CSS3概述
- 2024-10-25 通过css类/选择器选取元素 文档结构和遍历 元素树的文档
- 2024-10-25 琅琊榜:兄弟之情,远比男女之情更加动人
- 2024-10-25 参加兄弟婚礼祝福语 参加兄弟婚礼祝福语简短
你 发表评论:
欢迎- 最近发表
- 标签列表
-
- oraclesql优化 (66)
- 类的加载机制 (75)
- feignclient (62)
- 一致性hash算法 (71)
- dockfile (66)
- 锁机制 (57)
- javaresponse (60)
- 查看hive版本 (59)
- phpworkerman (57)
- spark算子 (58)
- vue双向绑定的原理 (68)
- springbootget请求 (58)
- docker网络三种模式 (67)
- spring控制反转 (71)
- data:image/jpeg (69)
- base64 (69)
- java分页 (64)
- kibanadocker (60)
- qabstracttablemodel (62)
- java生成pdf文件 (69)
- deletelater (62)
- com.aspose.words (58)
- android.mk (62)
- qopengl (73)
- epoch_millis (61)
本文暂时没有评论,来添加一个吧(●'◡'●)