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. pgrep：根据名称或其他属性查找进程（查找系统中running状态的进程）

    用法示例 # 根据名称过滤 dewan Work ~/code/shell% pgrep qemu 3570191 dewan Work ~/code/shell% pgrep qemu -l 357 ...

  2. WPF 全局样式资源管理

    在WPF通常我们习惯于把样式直接写在控件属性上,例如: <TextBox x:Name="pluginPathTxt" Margin="0,0,0,0" ...

  3. Axios向后段请求数据GET POST两种方法的不同之处

    GET请求 向后端请求时,通过URL向后端传递参数 axios({ url:'http://127.0.0.1:9000/get-user-list/', type:'json', //GET方法携带 ...

  4. Flutter系列文章-实战项目

    在本篇文章中,我们将通过一个实际的 Flutter 应用来综合运用最近学到的知识,包括保存到数据库.进行 HTTP 请求等.我们将开发一个简单的天气应用,可以根据用户输入的城市名获取该城市的天气信息, ...

  5. 用 GPT-4 给开源项目 GoPool 重构测试代码 - 每天5分钟玩转 GPT 编程系列(8)

    目录 1. 好险,差点被喷 2. 重构测试代码 2.1 引入 Ginkgo 测试框架 2.2 尝试改造旧的测试用例 2.3 重构功能测试代码 3. 总结 1. 好险,差点被喷 早几天发了一篇文章:&l ...

  6. Linux校验文件MD5和SHA值的方法

    1.需求背景 下载或传输文件后,需要计算文件的MD5.SHA256等校验值,以确保下载或传输后的文件和源文件一致 2.校验方法 如上图所示,可以使用Linux自带的校验命令来计算一个文件的校验值 Li ...

  7. 如何分析 JVM 内存瓶颈浅谈

    背景: 当操作系统内存出现瓶颈时,我们便会重点排查那个应用占用内存过大.对于更深一步分析内存的使用,就进一步去了解内存结构,应用程序使用情况,以及内存如何分配.如何回收,这样你才能更好地确定内存的问题 ...

  8. 以程序员的视角，介绍如何通过API接口获取淘宝商品数据的方法和步骤，并提供实际代码示例

    ​ 当我们想要获取淘宝商品数据时,可以通过调用淘宝开放平台的API接口来实现.下面是一些步骤和示例代码来帮助你开始. 步骤1:申请开发者账号和应用 在开始之前,你需要在淘宝开放平台上注册一个开发者账号 ...

  9. 【matplotlib基础】--文本标注

    Matplotlib 文本和标注可以为数据和图形之间提供额外的信息,帮助观察者更好地理解数据和图形的含义. 文本用于在图形中添加注释或提供更详细的信息,以帮助观察者理解图形的含义.标注则是一种更加细粒 ...

  10. 修改经过Spring Gateway的Json数据

    背景 使用Spring Cloud Gateway作为网关时经常会需要对报文内的json数据进行修改,但是目前看到的实现方法看起来都很复杂,这里提供一种使用Spring官方提供的ModifyReque ...