DOM学习

DOM

文档对象模型（document object model）

  • DOM是W3C（万维网联盟）的标准。
  • DOM 定义了访问 HTML 和 XML 文档的标准：
    DOM是（中立于平台和语言的）接口。它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
  • DOM可以让HTML文档呈现为一棵树（带有元素节点、属性节点、文本节点的树）

DOM树

  1. 元素节点：标签；上图中<html>、<body>、<p>等

  2. 属性节点:元素属性，如<a>标签的链接属性href="http://xxx"，<img>的src等等

  3. 文本节点:向用户展示的内容，如<div>这中间的内容就是文本节点啦。。。</div>

节点属性

一、nodeName 属性: 节点的名称，是只读的。

  1. 元素节点的 nodeName 与标签名相同
  2. 属性节点的 nodeName 是属性的名称
  3. 文本节点的 nodeName 永远是 #text
  4. 文档节点的 nodeName 永远是 #document

二、nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:

元素类型    节点类型
  元素          1
  属性          2
  文本          3
  注释          8
  文档          9

三、nodeValue 属性：节点的值

  1. 元素节点的 nodeValue 是 undefined 或 null
  2. 文本节点的 nodeValue 是文本自身
  3. 属性节点的 nodeValue 是属性的值

栗子栗子

<div id="con">
  <p>javascript</p>
  <div>jQuery</div>
  <h5>PHP</h5>
</div>


var x=document.getElementById("con");
x是最外面那个div,它有好多子节点 
x.childNodes可以获得它所有的子节点，有length。 eg: x.childNodes.length
x.firstChild 获得它第一个儿子
x.lastChild 获得它最后一个儿子
可以查看节点的名称（nodeName）、类型(nodeType)、值（nodeValue）； eg：x.firstChild.nodeName

特别提醒：

除了ie，其他浏览器空白节点也算上了！

parentNode
节点.parentNode        //获取当前节点的上一个父亲，可以无限点下午，往上找爷爷。。到 祖先。。
nextSibling & previousSibling
节点.previousSibling  //获得当前节点的上一个兄弟节点
节点.nextSibling      //获得当前节点的下一个兄弟节点
appendChild()
父.appendChild(新儿子); //把新儿子插到最后一个位置。
insertBefore()
父.insertBefore(新儿子,儿子x); //这样就把新儿子插到儿子x的前面了。
removeChild()
父.removeChild(儿子); //删除掉这个儿子
replaceChild()
父.replaceChild('新儿子'，'旧儿子');  //把旧儿子换成新儿子
createElement()
document.createElement('div') //创建一个新的div节点
createTextNode()
document.createTextNode("HELLO WORLD!");  //创建文本节点

eg:

var p = document.createElement('p');          //创建一个p标签（元素节点）
var ttt = document.createTextNode('sdfsdf');  //创建文本节点
p.appendChild(ttt);                           //把文本节点查到元素节点（p）里
document.body.appendChild(p);                 //把儿子插入父亲中（p->body）

遍历节点树

DOM操作

js获取

 1、document.getElementById('abc')             ====  获取id="abc"的元素。
 2、document.getElementsByName('abc')          ====  获取name="abc"的元素
 3、document.getElementsByTagName('input')     ====  获取input标签 元素

注意:
2、3的element是加s的！

posted @   Sameen  阅读(113)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示