dom 文本对象模型

12种节点类型

一、node类型  js中所有节点类型都继承自node类型 每个节点都有一个nodeType属性，表明节点类型；判断节点类型，if（somenode.nodeType==Node.ELEMENT_NODE）

1要了解节点特性需要nodeName 和nodeValue ，在使用前需要验证节点的类型 somenode.name的值是元素标签名，somenode.value始终为null。测试如下：

<body>
    <div id ="node"></div>
</body>
</html>
<script>
   if (document.getElementById("node").nodeType ==1) {
   alert( document.getElementById("node").nodeName) //DIV
   alert( document.getElementById("node").nodeValue) //null
       
   }
</script>

2节点关系childNodes parentNodes

nextSibling previousSibling   firstchild lastchild

<body>
    <div id ="node">
        <div></div>
    </div>
</body>
</html>
<script>
    var somenode = document.getElementById("node")
   if (somenode.nodeType ==1) {
   alert(somenode.nodeName) //DIV
   alert(somenode.nodeValue) //null
   alert(somenode.childNodes[1]) // htmlelementdiv
       
   }
</script>
3.操作节点
appendchild(）
insertBefore（要插入的节点，作为参照的节点（null 最好一个）（somenode.firstchild 第一个））
replaceChild  cloneNode（blooem）

二、document类型

nodeType=9  nodename#document

1.文档的子节点可以是 documentType Element comment

2.文档信息 document.title URL   domain //  referrer

3.查找元素 getElementById（）   getElementsByTagName（）返回nodelist getElementByName

4.文档写入 write（ ） writeln（） open（） close（）

Dom 的理解和操作的更多相关文章

  1. DOM的理解

    https://www.cnblogs.com/djtang/p/11538420.html  dom的理解 https://blog.csdn.net/jiuqiyuliang/article/de ...

  2. 使用Dom解析器，操作XML里面的信息

    import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.io.IOException;impo ...

  3. HTML DOM元素关系与操作

    <html> <head><title>DOM元素关系与操作</title></head> <body> <!-- div ...

  4. Dom,查找标签和操作标签

    Dom,查找标签和操作标签 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式 ...

  5. DOM的查找与操作

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. accp8.0转换教材第7章JavaScript操作DOM对象理解与练习

    程序调试,chrome开发人员工具,DOM操作,节点和节点间的关系,节点信息,操作节点,获取元素 一.单词部分 ①alert警告②prompt提示③parentNode父节点④childNode子节点 ...

  7. javaScript操作DOM深入理解

    做为一个web前端,处理和了解浏览器差异一个重要问题.下面将介绍本人在工作中的一些笔记总结,先介绍没有使用js库的情况. 1. setAttribute方法设置元素类名 : 在jQuery中,直接使用 ...

  8. 对dom的理解

    js对dom的操作可以理解为: 增.删.改.查 获取对象:查 对象操作:增,修,删 内容操作:innerHTML,innerText等 事件操作:mouse,key 样式操作:id,tag,class ...

  9. JavaScipt中对DOM的理解

    一.理解DOM 浏览器通过文档对象模型DOM使JavaScript程序可以访问页面上的元素,而DOM是页面上XHTML中文档正文标题.段落.列表.样式ID.class以及所有其他出现的数据的一个内部表 ...

  10. Virtual DOM 虚拟DOM的理解(转)

    作者:戴嘉华 转载请注明出处并保留原文链接( #13 )和作者信息. 目录: 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一:用JS对象模拟DOM ...

随机推荐

  1. 【技术实战】Vue技术实战【一】

    需求实战一 组件来源 ant-design-vue Button 按钮 Progress 进度条 效果展示 代码展示 <template> <ARow> <ACol> ...

  2. Element-ui源码解析(一):项目目录解析

    开始看原码了,我们要开始一些准备工作, 既然是拆代码,那么我们要先把代码搞到手 1.如何下载原码  随便开个项目 npm i element-ui -S 将源码下载到本地 随后在node_module ...

  3. Linux中的进程页表

    是什么 进程页表是用于管理进程虚拟地址空间和物理内存之间映射关系的数据结构.它记录了进程中每个虚拟页对应的物理页的信息. 什么作用 进程使用进程页表的方式是通过虚拟地址访问内存.当进程访问一个虚拟地址 ...

  4. pthon之字典的遍历

    对字典的操作稍有些陌生,在此记录一下. 字典的使用已{key:value}的形式存在,多个值以逗号分开. 字典的遍历共有三种方法,他们将返回类似列表的值,分别对应字典的键.值.键-值对.即keys() ...

  5. 隐藏tkinter弹出的创库

    1 import tkinter as tk 2 root = tk.Tk() 3 root.withdraw()

  6. 用 Python 自动创建 Markdown 表格 - 每天5分钟玩转 GPT 编程系列(4)

    目录 1. 他们居然问我要 Prompts 2. 让 GPT-4 来写代码 2.1 我对 DevChat 说 2.2 DevChat 回答 2.3 我又对 DevChat 说 2.4 DevChat ...

  7. 《CUDA编程：基础与实践》读书笔记(2)：CUDA内存

    1. 全局内存 核函数中的所有线程都能够访问全局内存(global memory).全局内存的容量是所有设备内存中最大的,但由于它没有放在GPU芯片内部,因此具有相对较高的延迟和较低的访问速度,cud ...

  8. 定义一个类，在实例化的时候，抛出NameError异常

    代码1:class cla: def __init__(self): #raise NameError # 抛出异常 print(r) cla() 运行截图:

  9. pyqt5学习日记

    前提需要pip安装PyQt5与PyQt5-tools 安装后会有qtdesigner.exe和pyuic5.exe,用everything直接可以搜索到 qtdesigner.exe是来设计ui的 p ...

  10. 《SQLi-Labs》02. Less 6~10

    @ 目录 索引 Less-6 题解 原理 Less-7 题解 Less-8 题解 Less-9 题解 原理 Less-10 题解 sqli.开启新坑. 索引 Less-6:布尔盲注,字符型[" ...