您的位置：首页 > Web前端 > JavaScript

Javascript DOM基础（一）概念

2014-06-05 20:32 507 查看

Dom基础概念：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
/*
DOM : Document Object Model 文档对象模型
文档：html页面
文档对象：页面中元素
文档对象模型：定义 为了能够让程序(js)去操作页面中的元素

DOM会把文档看作是一棵树，同时定义了很多方法来操作这棵数中的每一个元素（节点）
DOM节点

getElementById
getElementByTagName
document
document.body
*/
</script>
</head>

<body>
<div id="div1">
<p>11111111</p>
<ul id="ul1">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
</ul>
</div>
</body>
</html>

Dom树：

DOM节点
childNodes \ children

获取第一级子元素

有兼容性问题（空白节点）， nodeType属性

firstChild \ firstElementChild

获取子元素里的第一个

lastChild \ lastElementChild

获取子元素里的最后一个

nextSibling \ nextElementSibling

获取指定元素的下一个兄弟节点

previousSibling \ previousElementSibling

获取指定元素的上一个兄弟节点

parentNode

获取父节点，点击链接隐藏整个li

parentNode&offsetParent区别

offsetLeft \ offsetTop

offsetWidth \ clientWidth

有兼容性问题，标准下不能获取两层
获取：getAttribute(名称)
设置：setAttribute(名称, 值)
删除：removeAttribute(名称)
第三种方式的好处：自定义属性、相对网址

创建DOM元素
createElement(标签名) 创建一个节点
appendChild(节点) 追加一个节点
例子：留言板插入内容
插入元素
insertBefore(节点, 原有节点) 在已有元素前插入
例子：倒序留言板插入内容

删除DOM元素

removeChild(节点) 删除一个节点

例子：删除留言

替换DOM元素

replaceChild(节点, 已有节点) 替换节点

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航