zoukankan      html  css  js  c++  java
  • DOM学习中的小笔记

    DOM:Document Object Moder 文本对象模型 (框架)DOM包含了HTML中所有的标签
    DOM把文档层次中每一个对象称之为节点就是一个层次结构
    可以理解为一个树形结构 每个节点就像树叶
    每个再入浏览器的HTML文档都会成为document对象
    document对象可以让我们从JS中对HTML页面的所有元素进行访问
    HTML整个文档的跟就是html,在DOM中可以通过docuement.documentElement来访问html元素(element),html是整个节点数的跟节点。body是子节点,通过document.body也可以访问Body元素的
    Element元素
     
    DOM获取标签的方法
    document.getElementById()通过ID查找某个元素
    document.getElementsByClassName()通过class类名获取一个元素的集合
    document.getElementsByTagName()通过标签名获得一个元素的集合
    document.getElementsByName()通过name的值来获取一个元素列表
    document.querySelector() 通过css样式选择器获取第一个符合条件的元素
    document.querySelectorAll() 通过css样式选择器获取一个元素列表
     
    DOM节点
    在DOM里面包含了很多API,用来访问或者是操作HTML文档中的元素。
    在HTML文档中,所有的事物都被称作DOM节点,比如:元素节点,文本节点,注释节点等,其中标签元素在HTML文档中被称之为元素节点。我们要想通过JS代码对页面(其实就是对元素的操作)进行动态操作。所以我们要先去了解DOM节点,这样才能通过DOM提供的API对页面进行操作
    API:Application Programing Interface 应用程序编程接口
    API:是一些预定义好的一些功能(比如:属性和方法)。在HTML里面的API就是HTML定义好的一些属性和方法,通过使用这些定义好的属性和方法,来实现对HTML元素的操作
    关于节点(node):HTML文档中包含各种标签元素,这些标签元素按照层级关系和结构,大致可以分为:父元素、子元素、同胞元素,这些元素的层级关系和结构就构成了一个节点树的结构,在节点树中,父元素,子元素,同胞元素又被称为:父节点parentNode、子节点childNode、同胞节点siblingNode
     
    节点的解释
    1.HTML文档中所有的事物都是DOM节点
    1.1 HTML文档中的元素称为 元素节点
    1.2 HTML文档中的属性称为 属性节点
    1.3 HTML文档中的文本称为 文本节点
    1.4 HTML文档中的注释称为 注释节点
    1.5 HTML文档中的文档本身称为 文档节点(根节点)
    1.6 HTML文档中的空格和换行也是一个节点,一般被划分为文本节点
     
     
    2.nodeName属性是获取某一个节点的节点名称
    2.1 元素节点的nodeNome:和元素名称一样(大写的标签名)
    2.2 属性节点的nodeNome: 和属性名一样
    2.3 文本节点的nodeNome:#text
    2.4 注释节点的nodeNome:#comment
    2.5 文档节点的nodeNome: #document
     
    3.nodeType属性,获取某一个节点的节点类型
    3.1 元素节点的nodeType:1 对应 Node.ELEMENT.NODE
    3.2 属性节点的nodeType:2 对应 Node.ATTRIBUTE.NODE
    3.3 文本节点的nodeType:3 对应 Node.TEXT.NODE
    3.4 注释节点的nodeType:8 对应 Node.COMMENT.NODE
    3.5 文档节点的nodeType:9 对应 Nod.DOCUMENT.NODE
     
    4.nodeValue属性,获取某一个节点的值,一般用于文本节点和属性节点
    对于文本节点nodeValue 属性包含文本
    对于属性节点nodeValue 属性包含属性值
    nodeValue对于文档节点和元素节点是不可用的
    textContent 代替nodeValue 来获取文本节点的内容
     
    节点的方法
     
    1.获取节点的方法:元素节点名.(父节点parentNode、子节点childNode、同胞节点siblingNode)
    2.获取节点的上一个或者下一个:previous (父节点parentNode、子节点childNode、同胞节点siblingNode)上一个,next下一个(父节点parentNode、子节点childNode、同胞节点siblingNode)
    3.属性的方法:
    3.1 获取属性列表 标签名.attribute
    3.2 修改添加属性方法:
    <1>节点名.属性名 = “属性值”
    <2>通过 setAttribute修改属性值 标签名.setAttribute(“属性名”,“属性值”)
    <3>(get获取 has 判断 remover 移除)Attribute属性
    4.创建新的节点的方法
    document.createElement(创建元素节点即新的标签)
    document.createTextNode(创建文本节点即文本内容)
     
    5.创建完节点需要把新的节点连接到原有的节点中
    5.1.父级节点parentNode.appendChild(在父级标签添加一个新的元素)
    5.2 在某个子节点之前插入新的节点 : 父级节点parentNode.insertBefore(要插入的节点,在哪个子节点之前【第二个参数可以为null(在元素节点的子节点之后) 为null时效果等同于appendChild】)
    5.3 移除某个子节点: 父级节点parentNode.removeChild(要移除的节点)
    5.4 writeln (要添加的内容)将内容写入文档,并添加了一个换行符,重启一行
    5.5 write(要添加的内容) 将内容写入文档,直接在开始标签和结束标签之间写入新的内容
    5.6 在指定位置插入 HTML内容
    标签名.insertAdjacentHTML(“插入HTML内容的位置()”,“要插入的内容”)
    5.7 在指定位置插入 元素
    标签名.insertAdjacentElement(“插入HTML内容的位置()”,“要插入的内容”)
     
     
    DOM节点的类名修改方法
    1.标签名.classList.(add增加,remove移除,)
     
    DOM节点内容的获取方法
    1.标签名.innerHTML 获取元素内的HTML内容(获取到的是这个元素节点内的文本内容或者标签,连带子标签一块获取),也可以修改原来的内容,覆盖原来的标签
    2.标签名.innerText 获取元素内的文本内容 (只获取文本内容)
    3.标签名.textContent 获取元素内的文本内容(连带着空格换行一块获取,和innerText差不多)
    4. 标签名.outerHTML 获取元素的HTML内容,包含这个标签(从这个开始标签和结束标签的所有内容连带这个标签本身)
    5.标签名.outerText 获取元素的文本内容(跟innerText差不多)
     
    获取DOM的全部节点
     
  • 相关阅读:
    装java开发环境 报client/jvm.dll找不到
    json expected name at 1 1
    svn右键菜单不显
    win10 随记
    eclipse配置打开选中文件存储的目录快捷配置
    mybatis 常见面试题
    java 求取昨天日期
    字符串反转记录总结
    @RequestMapping 无法加载
    expected at least 1 bean which qualifies as autowire candidate for this depe (spring无法注入)
  • 原文地址:https://www.cnblogs.com/baipengzhen/p/5849221.html
Copyright © 2011-2022 走看看