zoukankan      html  css  js  c++  java
  • Web

    1. 简介

    DOM(Document Object Mode)是一套web标准,地那一了访问HTML文档的一套属性、方法和事件

    其本质:

      网页 与 脚本语言 沟通的桥梁

      脚本语言通过DOM对象来访问HTML页面,从而改变文档的结构、样式和内容。

      当浏览器载入HTML文档时,他就会称谓document对象树。

    2. DOM对象

    (1)文档对象:整个HTML文档

    (2)节点对象:所有的HTML元素都是元素节点

    (3)属性对象:依附于元素节点,所有节点的属性都是节点

    (4)文本对象:文本插入到HTML元素是文本节点

    3. 查找元素

    (1)元素的id属性

      document.getElementsById(元素id值)

      Id唯一,返回唯一元素

    (2)元素的class属性

      documenr.getElementsByClassName(元素class值)

      返回值为一个元素列表

    (3)元素的标签名

      document.getElementsByTagName(标签名)

      返回值为一个元素列表

    (4)css选择器

      查找一个元素:document.querySelector(css 表达式)

      查找多个元素:document.querySelectorAll(css 表达式)

      在css选择器中,#表示元素的id  .表示元素的class属性

    4. 获取和修改元素属性

    (1)获取元素属性

      document.getElementByXXX("").属性名

      document.getElementByXXX("")。getAttribute(属性名)

    (2)修改元素属性

      document.getElementByXXX("").属性名 = 属性值

      document.getElementByXXX("").setAttribute(属性名,属性值)

    5. 获取和修改元素的内容

    (1)获取元素内容

      document.getElementByXXX("").innerHTML    包括HTML标签

      document.getElementByXXX("").innerText  不包括标签,纯文本

    (2)修改元素内容

      document.getElementByXXX("").innerHTML = new HTML    包括HTML标签

      document.getElementByXXX("").innerText = new Text 不包括标签,纯文本

    6. 修改样式

      document.getElementByXXX("").style.样式名=样式值

  • 相关阅读:
    axios基本用法
    Iframe父子窗口之间的跨域事件调用和传值
    js 比较两个日期的大小
    小程序webview实践
    小程序入口构造工具&二维码测试工具
    小程序无限层级路由方案
    TypeScript基础类型,类实例和函数类型声明
    小程序多业务线融合【完整分包业务接入】
    浅谈React16框架
    CSS Modules 与 scoped 的不一样
  • 原文地址:https://www.cnblogs.com/gotesting/p/9895002.html
Copyright © 2011-2022 走看看