【JS】20--Core DOM

1. 节点关系

三种类型的节点

  • 元素类型
  • 文本类型
  • 属性类型

操作html的三种方式

  • html方式
  • DOM核心方式
  • XML方式

a. 创增删改

方法 解释
createElement("") 创建元素节点
插入节点
parent.appendChild(child) 后面内部插入
parent.insertBefore(new,node) new 新插入的节点
node 在node节点前
el.html(str) 获取设置html内容
el.text() 获取设置文本内容
el.value 获取设置表单值
el.cloneNode(true) 复制节点
parent.remove(child) 父亲删除子节点

b. 节点

  1. 节点类型
    nodeType 1-9
    元素节点 1
    文本节点 3
  2. nodeValue
    节点的值 (文本值)
  3. nodeName
    节点的名称 ( 标签名)

c. Element类(元素节点类)

--- ---
parentElement 父元素节点
children 子节点
firstElementChild 第一个子节点
lastElementChild 最后一个子节点
previousElementSibling 上一个兄弟元素
nextElementSibling 下一个兄弟元素

d. node类 (节点类)

--- ---
parentNode 父节点
childNodes 子节点
firstChild 第一个子节点
lastChild 最后一个子节点
previousSibling 上一个兄弟元素
nextSibling 下一个兄弟元素

区别 :
node类型包含了文本节点和元素节点
兼容性 node类型更好,操作方便 Element更方便

e. 表格操作

--- ---
table.insertRow(n) n插入到第几行
row.insertCell(n) n插入到第几列
row.rowIndex 返回当前是第几行
table.deleteRow(n) 删除第n行

f. 距离相关

宽高
window.innerWidth 可视区宽
window.innerHeight 可以区域高
document.documentElement.offsetHeight 文档高
document.documentElement.offsetWidth 文档宽
el.clientWidth
el.clentHeight
内容+padding(内边距) 的宽高
el.offsetHeight
el.offsetWidth
内容+padding(内边距)+border(边框)的宽高
el.scrollHeight
el.scrollWidth
内容+padding(内边距)+滚动区域的宽高
偏移值
getBoundingClientRect
x
y
width 宽
height 高
top 距离可视区域的top
bottom 距离可视区域的底部偏移值
right 距离可视区域的右侧偏移值
offsetTop 可以获得 HTML 元素距离上方或外层元素的位置
offsetLeft
clientTop 获取元素上边框的高度

滚动值
scrollTop滚动顶部的值
scrollLeft滚动左侧的值

HTMLCollection 对象

getElementsByTagName() 方法返回 HTMLCollection 对象。

HTMLCollection 对象是类数组的 HTML 元素列表(集合)。

下面的代码选取文档中的所有 <p> 元素:

<h1>JavaScript HTML DOM</h1>
<p>Hello World!</p>
<p>Hello China!</p>
<p id="demo"></p>

<script>
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML =
"第二段的 innerHTML 是:" + myCollection[1].innerHTML;
</script>

HTML HTMLCollection 长度
length 属性定义了 HTMLCollection 中元素的数量:

实例

var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection.length; 

HTMLCollection 并非数组!
HTMLCollection 也许看起来像数组,但并非数组。

您能够遍历列表并通过数字引用元素(就像数组那样)。

不过,您无法对 HTMLCollection 使用数组方法,比如 valueOf()、pop()、push() 或 join()。

HTML DOM NodeList 对象

NodeList 对象是从文档中提取的节点列表(集合)。

NodeList 对象与 HTMLCollection 对象几乎相同。

如使用 getElementsByClassName() 方法,某些(老的)浏览器会返回 NodeList 对象而不是 HTMLCollection。

所有浏览器都会为 childNodes 属性返回 NodeList 对象。

大多数浏览器会为 querySelectorAll() 方法返回 NodeList 对象。

下面的代码选取文档中的所有 <p> 节点:

实例

var myNodeList = document.querySelectorAll("p");

亲自试一试

NodeList 中的元素可通过索引号进行访问。

如需访问第二个 <p> 节点,您可以这样写:

y = myNodeList[1];
注释:索引从 0 开始。

HTML DOM Node List 长度

length 属性定义节点列表中的节点数:

实例

var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = myNodelist.length;

例子解释:

  • 创建所有 <p> 元素的列表
  • 显示该列表的长度

length 属性在您希望遍历节点列表中的节点时很有用:

实例

改变节点列表中所有 <p> 元素的背景色:

var myNodelist = document.querySelectorAll("p");
var i;
for (i = 0; i < myNodelist.length; i++) {
    myNodelist[i].style.backgroundColor = "red";
}

HTMLCollection 与 NodeList 的区别

HTMLCollection(前一章)是 HTML 元素的集合。

NodeList 是文档节点的集合。

NodeList 和 HTML 集合几乎完全相同。

HTMLCollection 和 NodeList 对象都是类数组的对象列表(集合)。

它们都有定义列表(集合)中项目数的 length 属性。

它们都可以通过索引 (0, 1, 2, 3, 4, ...) 像数组那样访问每个项目。

访问 HTMLCollection 项目,可以通过它们的名称、id 或索引号。

访问 NodeList 项目,只能通过它们的索引号。

只有 NodeList 对象能包含属性节点和文本节点。

节点列表不是数组!

节点数组看起来像数组,但并不是。

您能够遍历节点列表并像数组那样引用其节点。

不过,您无法对节点列表使用数组方法,比如 valueOf()、push()、pop() 或 join()。

最后编辑于
?著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,128评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,316评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,737评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,283评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,384评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,458评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,467评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,251评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,688评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,980评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,155评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,818评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,492评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,142评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,382评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,020评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,044评论 2 352

推荐阅读更多精彩内容