【5】DOM

本文详细介绍了DOM(文档对象模型)的概念、功能、Document对象的使用及节点、访问、操作等方面的知识,包括如何通过window.document获取文档对象,使用各种方法和属性进行页面元素的管理,以及如何创建、设置、移除节点和操作CSS样式。

DOM

全称Document Object MOdel,即文档对象模型。

更新说明:

  1. 2015/12/03更新
    • 增加innerHTML的说明

一、功能

  • 将HTMl页面标记按顺序在内存中组建成一颗DOM树,再解析到浏览器窗口

  • 添加、删除、修改页面的某一部分

二、Document对象

  • 通过window.document获取

  • 集合:all、forms、images、links

  • 属性:body、domain、referer、title、URL

  • 方法:write()、getElementById()、getElementByName()、
    getElementByTagName()、getElementByClass

1.节点Node

  • 划分1
    • 文档节点(document)
    • 文本节点(element)
    • 属性节点(attribute)
    • 注释节点(comment)
  • 划分2
    • 子节点
    • 父节点
    • 兄弟节点

2.访问节点

  1. 使用document的方法(id、tagName、nodeList)

  2. 使用元素节点的属性(parentNode、firstChild、lastChild、innerHTML、childNodes)

  3. 访问根节点

    • document.documentElement
    • document.body
  4. 信息属性(nodeName、nodeValue、nodeType)

3.操作节点

  1. 创建节点:document.createXXX(YYY);

    • 设置节点属性:elt.setAttribute(name,value);
  2. 挂载新节点

    • elt.appendChild(e)
    • elt.insertBefore(e,child)
  3. 移除节点:elt.removeChild(eChild)

4.设置CSS样式

elt.style.样式名=值

5.补充

5.1 innerHTML
  1. 功能

Sets or retrieves the HTML between the start and end tags of the object.
设置标签体的内容

  1. 语法
HTMLN/A (不适用)
Scriptingobject.innerHTML [ = sHTML ]

3. 可用的值

sHTML String that specifies or receives the content between the start and end tags.
字符串

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值