DOM--（Document类型）

最新推荐文章于 2023-02-06 10:36:24 发布

kalinara

最新推荐文章于 2023-02-06 10:36:24 发布

阅读量222

点赞数

分类专栏： JavaScript 文章标签： DOM document

本文链接：https://blog.csdn.net/kalinara/article/details/74557435

版权

JavaScript 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

在浏览器中，document对象是HTMLDocument对象（继承于Document类型）的一个实例，表示整个页面。

【子节点】

1.DocumentType（用document.doctype引用）
2.body（用document.body引用）
3.DocumentElement（指<HTML>，用document.documentElement引用）
4.Element
5.ProcessingInstruction
6.Comment

【属性】

• document.title   
• document.URL
• document.domain  域名
• document.head || document.getElementsByTagName("head")[0]
• document.referrer  来源页面的URL
• document.charset   文档字符集
• document.defaultCharset 默认浏览器和操作系统设置文档默认的字符集
• document.anchors 包含所有带name特性的a元素
• document.forms 
• document.images
• document.links 包含所有带link特性的a元素
• document.activeElement 引用DOM中当前获得焦点的元素
• document.readyState 表明文档加载情况
    两种值
    - loading
    - complete
• document.compatMode 表明浏览器采用哪种渲染模式
    - 两种模式
    - CSS1Compat 标准模式
    - BackCompat 混杂模式
• document.documentMode 表明页面使用哪种文档模式
• document.styleSheets[?] 取得第？个样式表
• document.styleSheets[?].cssRules[??]  or document.styleSheets[?].rules[??] 取得第？个样式表的第？？条规则

【方法】

• 查找元素  document.getElementById(id)

• 查找元素（返回0个或多个元素的NodeList） 
document.getElementsByTagName(标签名) 

• 查找元素（返回带特定name的所有元素，通常是取得单选按钮）document.getElementsByName(name名)

• 查找元素 （返回NodeList）
Document.getElementsByClassName(类名)
X.getElementsByClassName(类名)

• 基于css选择符，从DOM中获取一个元素
document.querySelector()  会在文档元素范围内查找一个匹配的元素
X.querySelector()  会在元素后代的范围内查找一个匹配的元素

• 基于css选择符，从DOM中获取所有匹配的元素（NodeList）
document.querySelectorAll()
X.querySelectorAll()

• 检测是否有该选择 X.matchesSelector(元素，选择器)

• 创建属性 document.createAttribute(属性名)

• 创建元素 document.createElement(标签名)

• 创建文本节点 document.createTextNode(文本)

• 创建注释节点 document.createComment(注释内容)

• 创建文档片段 document.createDocumentFragment(要添加的文档节点)

• 检测文档是否获取焦点 document.hasFocus()
• document.write()
• document.writeln()
• document.open()
• document.close()

•确定浏览器是否支持该DOM模块
document.implementation.hasFeature("DOM模块名","版本号")  
X.isSupported("DOM模块名","版本号") 确定当前节点是否具有该DOM模块的功能

•document.defaultView.getComputedStyle(元素，伪元素/null) 可获得所有方式定义的样式
{相比style对象的style.getPropertyValue(属性名)只能获得style特性，还包括嵌入的样式表和外部样式表}
【IE】: 元素.currentStyle