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. log4j2---基于vulhub的log4j2漏洞复现---反弹shell

    基于vulhub的log4j2漏洞复现---反弹shell 1.方法一 环境准备: 和我上一篇fastjson1.2.24漏洞复现是一样的环境,方法也差别不大 声明:遵纪守法,仅作学习记录用处,部分描 ...

  2. 解决npm install 报错 'proxy' config is set properly. See: 'npm help config'

    输入以下命令 npm config set proxy null npm config set https-proxy null 之后重新安装即可 文章参考 https://blog.csdn.net ...

  3. QTextEdit的使用

    import sys from PyQt5.QtWidgets import QApplication, QWidget, QTextEdit,QVBoxLayout, QPushButton cla ...

  4. 关于 ModelScope 的视频 “AI 换脸” 优化方案

    前言 前面一文,初步完成了一下 "AI 换脸" 视频处理程序.完成了视频拆帧,拆帧图片人脸融合,已经音频提取和最后的人脸融合图片的整合(也就是将图片和音频组成视频).但是在人脸融合 ...

  5. 四 APPIUM GUI讲解(Windows版)（转）

    Windows版本的APPIUM GUI有以下图标或者按钮: ·Android Settings  - Android设置按钮,所有和安卓设置的参数都在这个里面 ·General Settings – ...

  6. R2在全渠道业务线的落地

    随着业务的增长,系统的高频率迭代,质量保障工作迫切需要引入更加科学高效的测试方法来助力业务高质量的交付.长城项目一期测试中,全渠道质量团队引入技术平台部R2技术,极大的提升了项目交付的质量.因此,本文 ...

  7. 宝塔linux网站搬家思路

    对于一个网站来说,其实就分为两个部分,一个是网站的源码,另一个就是网站的数据库. 那么对于网站搬家而言,要考虑的也就是两点,一是要打包网站的源码,再者就是要打包网站的数据库.其次就是要在新的站点,配置 ...

  8. idea的maven home默认路径无法修改成功的问题

    主要原因是项目里有许多初始默认文件 删除项目初始化后的生成的.mvn mvnw mvnw.cmd help.md .gitignore等文件后再修改mavenhome,然后reload maven就修 ...

  9. 《SQL与数据库基础》12. SQL优化

    目录 SQL优化 数据插入 insert优化 大批量插入数据 主键优化 order by优化 group by优化 limit优化 count优化 count用法 update优化 本文以 MySQL ...

  10. 接口自动化测试项目 | IHRM登录接口自动化测试

    项目内容如下: ### 需求- 地址:http://ihrm-java.itheima.net/#/login- 测试接口: - 登录接口:针对登录的13个cases### 技术 - V1:pytho ...