HTML DOM属性和方法

VIP文章 于 2022-08-09 09:01:14 发布
阅读量319 收藏 1
点赞数
分类专栏： HTML DOM 文章标签： html 前端 javascript
星
本文链接：https://blog.csdn.net/du20020621/article/details/126235026
版权

1.Attr对象

1.1.属性和方法
属性 / 方法 描述
attr.isId 如果属性是 id 类型，则返回 true，否则返回 false。
attr.name 返回属性的名称。
attr.value 设置或返回属性的值。
attr.specified 如果已指定属性，则返回 true，否则返回 false。
nodemap.getNamedItem() 从 NamedNodeMap 返回指定的属性节点。
nodemap.item() 返回 NamedNodeMap 中位于指定下标的节点。
nodemap.length 返回 NamedNodeMap 中的节点数。
nodemap.removeNamedItem() 移除指定的属性节点。
nodemap.setNamedItem() 设置指定的属性节点（通过名称）。
1.2.DOM 4 警告！

在 W3C DOM Core 中，Attr (attribute) 对象从 Node 对象继承所有属性和方法。
在 DOM 4 中，Attr 对象不再从 Node 继承。
为了保证未来的代码安全，您应该避免在属性对象上使用节点对象的属性和方法：

属性 / 方法 避免的理由
attr.appendChild() 属性没有子节点。
attr.attributes 属性没有属性。
attr.baseURI 使用 document.baseURI 代替。
attr.childNodes 属性没有子节点。
attr.cloneNode() 使用 attr.value 代替。
attr.firstChild 属性没有子节点。
attr.hasAttributes() 属性没有属性。
attr.hasChildNodes 属性没有子节点。
attr.insertBefore() 属性没有子节点。
attr.isEqualNode() 没有意义。
attr.isSameNode() 没有意义。
attr.isSupported() 始终为 true。
attr.lastChild 属性没有子节点。
attr.nextSibling 属性没有同级节点。
attr.nodeName 使用 attr.name 代替。
attr.nodeType 始终为 2 (ATTRIBUTE_NODE)。
attr.nodeValue 使用 attr.value 代替。
attr.normalize() 属性无法被正常化。
attr.ownerDocument 始终是您的 HTML 文档。
attr.ownerElement 这是您用来访问该属性的 HTML 元素。
attr.parentNode 这是您用来访问该属性的 HTML 元素。
attr.previousSibling 属性没有同级节点。
attr.removeChild 属性没有子节点。
attr.replaceChild 属性没有子节点。
attr.textContent 使用 attr.value 代替。

2.Document 对象

2.1.Document 对象集合
集合 描述
all[] 提供对文档中所有 HTML 元素的访问。
anchors[] 返回对文档中所有 Anchor 对象的引用。
applets 返回对文档中所有 Applet 对象的引用。
forms[] 返回对文档中所有 Form 对象引用。
images[] 返回对文档中所有 Image 对象引用。
links[] 返回对文档中所有 Area 和 Link 对象引用。
2.2.Document 对象属性
属性 描述
body 提供对 <body> 元素的直接访问。
对于定义了框架集的文档，该属性引用最外层的 <frameset>。
cookie 设置或返回与当前文档有关的所有 cookie。
domain 返回当前文档的域名。
lastModified 返回文档被最后修改的日期和时间。
referrer 返回载入当前文档的文档的 URL。
title 返回当前文档的标题。
URL 返回当前文档的 URL。
2.3.Document 对象方法
方法 描述
close() 关闭用 document.open() 方法打开的输出流，并显示选定的数据。
getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。
open() 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write() 向文档写 HTML 表达式 或 JavaScript 代码。
writeln() 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

3.Element 对象

3.1.属性和方法
属性 / 方法 描述
element.accessKey 设置或返回元素的快捷键。
addEventListener() 将事件处理程序附加到元素。
element.appendChild() 向元素添加新的子节点，作为最后一个子节点。
element.attributes 返回元素属性的 NamedNodeMap。
element.childNodes 返回元素子节点的 NodeList。
element.className 设置或返回元素的 class 属性。
element.clientHeight 返回元素的可见高度。
element.clientWidth 返回元素的可见宽度。
element.cloneNode() 克隆元素。
element.compareDocumentPosition() 比较两个元素的文档位置。
element.contentEditable 设置或返回元素的内容是否可编辑。
element.dir 设置或返回元素的文本方向。
element.firstChild 返回元素的首个子。
element.getAttribute() 返回元素节点的指定属性值。
element.getAttributeNode() 返回指定的属性节点。
element.getElementsByTagName() 返回拥有指定标签名的所有子元素的集合。
element.getFeature() 返回实现了指定特性的 API 的某个对象。
element.getUserData() 返回关联元素上键的对象。
element.hasAttribute() 如果元素拥有指定属性，则返回true，否则返回 false。
element.hasAttributes() 如果元素拥有属性，则返回 true，否则返回 false。
element.hasChildNodes() 如果元素拥有子节点，则返回 true，否则 false。
element.id 设置或返回元素的 id。
element.innerHTML 设置或返回元素的内容。
element.insertBefore() 在指定的已有的子节点之前插入新节点。
element.isContentEditable 设置或返回元素的内容。
element.isDefaultNamespace() 如果指定的 namespaceURI 是默认的，则返回 true，否则返回 false。
element.isEqualNode() 检查两个元素是否相等。
element.isSameNode() 检查两个元素是否是相同的节点。
element.isSupported() 如果元素支持指定特性，则返回 true。
element.lang 设置或返回元素的语言代码。
element.lastChild 返回元素的最后一个子元素。
element.namespaceURI 返回元素的 namespace URI。
element.nextSibling 返回位于相同节点树层级的下一个节点。
element.nodeName
最低0.47元/天 解锁文章
子之星
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML DOM 常用的属性和方法
04-09
HTML DOM 文档对象模型 常用的 属性和方法
DOM下的节点属性和操作小结
12-11
属性： 1 .nodeName 节点名称，相当于tagName.属性节点返回属性名，文本节点返回#text。nodeName，是只读的。...文本和属性节点的childNodes永远是null。可以用hasChildNodes()来判断是否有子节点。只读属性，要
获取元素相对于父元素的位置_DOM初识 - 获取元素方法合辑
weixin_39819671的博客
11-21 942
今日背诵小纸条方法一 通过ID获取getElementById( ’summer’ );// 对象的数据类型为 HTMLDivElement对应CSS元素 今天好热啊方法二 根据标签名获取，获取的集合是动态集合，会根据运行过程动态刷新getElementsByTagName( ‘p’ );// 对象的数据类型为 HTMLCollection 伪数组对应CSS元素今天好热啊方法三 根据name获取，...
html属性与dom属性区别：
liweibo348的博客
11-09 1165
html属性中的值是不变的，dom属性的值是变化的，那么angular中的事件绑定，属性绑定（差值表达式：{{}}这种形式）其实是dom属性的一套东西，为何？因为绑定的东西是可变的 ，html属性又不是可变的，所以只能用dom属性。  ...
html属性和dom属性的区别,HTML属性与DOM属性的区别是什么？
weixin_32823659的博客
06-05 282
HTML属性与DOM属性的区别是什么？本篇文章就给大家介绍HTML属性与DOM属性的区别。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助区分DOM属性和HTML元素属性HTML元素的属性大家应该都知道，比如元素的src，id等。最终浏览器会解析HTML，构建DOM模型，也就是说浏览器会解析HTML元素为DOM元素。javascript中获取到的都是DOM元素，而不是HTML元素。H...
HTML属性和DOM属性的区别
单枪匹码
12-09 3023
1、区分DOM属性和HTML属性： 1）HTML元素的属性大家都应该知道，比如：<img>元素的src，id等。 2）最终浏览器会解析HTML，构建DOM模型，也就是说浏览器会解析HTML元素为DOM元素。 3）JavaScript中获取到的都是DOM元素，而不是HTML元素。 4）HTML元素属性和DOM属性的名称大部分都相同，所以导致很多人错误的认为两者是相同的。 5）区分HTML...
DOM属性和HTML属性的区别
热门推荐
justforuse的博客
03-14 1万+
这两者之间的区别我之前可能不小心涉及过。参考这篇博客：http://blog.csdn.net/u014291497/article/details/50639628。 但是没有细致的了解之间的本质区别。直到看angular2文档关于模板语法这个部分的时候涉及到这个问题： https://angular.cn/docs/ts/latest/guide/template-syntax.html#!
详谈DOM简介及节点、属性、查找节点的方法
11-26
DOM定义了表示和修改文档的方法，不能修改css样式表，在js中使用DOM方法改变元素的css样式，实质上是在元素上添加行间样式。 DOM对象就是宿主对象，用来操作HTML和xml功能对象的集合。 xml——>xhtml——>html4.0...
DOM操作一些常用的属性汇总
12-09
DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。 2.DOM的一些常用的属性 　2.1 通过ID获取元素 　（1）语法： 代码如下: document.getElementById(“id”); 　（2）作用：id就向一个人的身份证，...
JavaScript简单遍历DOM对象所有属性的实现方法
11-25
本文实例讲述了JavaScript遍历DOM对象所有属性的实现方法。分享给大家供大家参考，具体如下： DOM对象的HTML： 复制代码 代码如下:<button id=”btnToggleState” onclick=”toggleStateManagement()”>...
DOM属性和HTML属性区别&&prop和attr区别
qq_21213785的博客
09-19 1583
ocument.getElementById('test').getAttribute('custom-attr') 或 $('#test').attr('custom-attr')一、DOM属性和HTML属性区别        1、HTML元素的属性，比如&lt;img&gt;元素的src，id等，最终浏览器会解析HTML，构建DOM模型，也就是说浏览器会解析HTML元素为DOM元素    ...
jquery之html属性和dom属性操作
huangql517的博客
06-12 185
1&gt;html属性修改attr设置属性值或者 返回被选元素的属性值removeAttr从每一个匹配的元素中删除一个属性propprop()获取在匹配的元素集中的第一个元素的属性值.它是对当前匹配到的dom对象设置属性。removeProp用来删除由.prop()方法设置的属性集addClass（添加多个类名）为每个匹配的元素添加指定的类名。removeClass从所有匹配的元素中删除全部或者指...
HTML属性与DOM属性的区别
buger的专栏
10-05 5887
对于浏览器引擎而言，并不存在“HTML标签”这回事，其本质是DOM节点对象。也并不存在“HTML文档”这回事，其本质是DOM节点对象组成的文档树。浏览器引擎只是存储和渲染DOM节点对象。
Dom属性和HTML属性的区别
Sakura__Lu的博客
09-12 2115
w 遇到这个问题的可以先参考这一篇文章，能帮你很好的理解DOM和HTML两种属性的区别之处：https://blog.csdn.net/u014291497/article/details/50639628 在angular2以上的版本的学习当中，你也许会遇到这样的问题。例如代码： &lt;input type = "text" value = '123456' (input) = 'on...
【Angular4】 HTML属性与DOM属性对比（1）
十年磨一剑，沉淀……
03-31 830
HTML属性和DOM属性的关系 少量HTML 属性和DOM 属性之间有着1:1的映射，如id. eg:有些HTML 属性没有对应的DOM 属性,如colspan. 有些DOM 属性没有对应的HTML 属性,如textContent. HTML 属性的值指定了初始值; DOM 属性的值表示当前值。 DOM 属性的值可以改变; HTML 属性的值不能改变。 模板绑定是通过DOM属性和事件...
如何遍历取出HTMLCollection里各个节点的属性值，并生成数组
zwf193071的专栏
08-28 1万+
前言 有时，我们想批量取出HTMLCollection里的某个属性值，并将其生成数组，这里，为大家介绍一种简单有效的方法。 例子代码如下所示： var div = document.createElement('div') var p1 = document.createElement('p') p1.textContent = '1' var p2 = document.createElement('p') p2.textContent = '2' div.appendChild(p1) div.ap
Navigator is deprecated and has been removed from this package.
牛八少爷的专栏
08-28 449
Navigator is deprecated and has been removed from this package. It can now be installed and imported from `react-native-deprecated-custom-components` instead of `react-native`. Learn about alternative...
DOM表单元素获取和事件，HTMLCollection 对象
weixin_58139900的博客
11-07 1160
目录 表单元素的获取 表单元素的事件 表单事件form onsubmit:提交事件 onreset:重置事件 表单元素事件 input onfocus:获取焦点 onblur：失去焦点 onchange：事件 oninput:输出的时候实时触发 在IE8及以下不会触发但是不会报错IE独有的 onpropertychange 表单元素的获取 语法：form.name值; 返回值：单个name值获取到具体的元素，多个name值获取到一个集合 &...
Day13_DOM课堂笔记
weixin_48733024的博客
09-04 94
Day13 DOM 笔记 1 回顾 元素的操作 ① 获取元素 1. 根据 ID 名 document.getElementById() 2. 根据标签名 document.getElementsByTagName() 返回 HTMLCollection 对象 元素对象.getElementsByTagName() 3. 根据类名 document.getElementsByClassName() 返回 HTMLCollection 对象 元素对象.getE
简述CoreDom与HTMLDOM访问和修改节点属性值的方法
最新发布
05-18
CoreDOM和HTMLDOM都提供了访问和修改节点属性值的方法： 1. 访问节点属性值： - CoreDOM：使用`getAttribute()`方法可以获取节点的属性值，例如：`node.getAttribute('id')`可以获取节点的`id`属性值。 - ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值