DOM

节点层次

Node类型 数值
Element元素 1
ATTRIBUTE属性 2
TEXT文本 3
CDATA(只针对XML文档) 4
ENTITY_REFRENCE 5
ENTITY 6
PROCESSING_INSTRUCTION 7
COMMENT 8
DOCUMENT文档 9
DOCUMENT_TYPE文档类型 10
DOCUMENT_FRAGMENT 11
NOTATION 12

nextSibling ,previousSibling,
firstChild,lastChild,
parentNode,childNodes,
hasChildNodes(),

ownerDocument //每个节点都有,指向整个文档的文档节点
操作节点
appendChild():向ChildNodes列表的末尾添加一个节点。
如果节点本来就是文档的一部分,则将该节点由原来的位置移到文档末尾
insertBefore(􏵾􏸝􏲵􏳤􏱴􏱵􏱸􏰤􏴗􏳩􏶇􏳤􏱴􏱵要插入的节点,参照节点)􏰫:插入节点在参照节点之后。
replaceChild(要插入的节点,要替换的节点)
removeChild(要移除的节点)
cloneNode(true):复制节点及其整个子节点树;
cloneNode(false):只复制该节点;
cloneNode()不会复制节点的Javascript属性,如事件处理程序。

Document

document.documentElement //取得对􏸿􏹀􏹹<html>的􏺐􏹔引用
document.doctype //取得对􏸿􏹀􏹹<!DOCTYPE>的􏺐􏹔引用
document.title //取得文档标题
document.URL //取得文档URL
document.domain //取得文档域名
document.referrer //取得来源页面的URL

document.anchors //包含文档中所有带name特性的a元素
document.form //文档中所有的Form元素
document.images //文档中所有的image元素
document.links //包含文档中所有带href特性的a元素

document.implementation //DOM一致性检测,有一个方法hasFeature()

FORM

caption:保存对<caption>元素的指针
tBodies:一个<tbody>元素的HTMLCollection
tFoot:保存对<tfoot>元素的指针
tHead:保存对<thead>元素的指针
rows:一个表格中所有行的HTMLCollection
createTHead():创建<thead>元素
createTFoot():创建<tfoot>元素
createCaption():创建<caption>元素
deleteTHead():删除<thead>元素
deleteTFoot():删除<tfoot>元素
deleteCaption():删除<caption>元素
deleteRow(pos):删除指定位置的行
insertRow(pos):向rows集合中的指定位置插入一行
cells:保存着􏰚􏲿􏳀<tr>元素􏱒􏱓中单元格􏳏􏱒􏰘􏰉 HTMLCollection
deleteCell(pos):删除指定位置的单元格
insertCell(pos):向cells集合的指定位置插入一行

//创建表格
var table = document.createElement("table");
table.border=1;
table.width="100";

//创建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);

//创建第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cell[1].appendChild(document.createTextNode("Cell 2,1"));

//创建第二行
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.row[1].Cell[0].appendChild(document.createTextNode("Cell 2,1"));
tbody.rows[1].insertCell(1);
tbody.row[1].Cell[1].appendChild(document.createTextNode("Cell 2,2"));

//将表格添加到文档主体中
document.body.appendChild(table);
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • DOM是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某...
    给我一炷香的时间阅读 570评论 0赞 1
  • 本章内容 理解包含不同层次节点的 DOM 使用不同的节点类型 克服浏览器兼容性问题及各种陷阱 DOM 是针对 HT...
    闷油瓶小张阅读 838评论 0赞 1
  • DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API。DOM 描绘了一个层次化的节点树,允许开发...
    劼哥stone阅读 952评论 8赞 6
  • 一个传统的女性,要相夫教子、贤惠温柔,要上得厅堂、下得厨房,现在我听说谁谁的老婆很贤惠,我反而很同情她,我觉得...
    美丽小花的猪阅读 809评论 7赞 6
  • 好吃的f
    摇摆的奶嘴阅读 170评论 0赞 0

友情链接更多精彩内容