HTML DOM 属性

最新推荐文章于 2022-10-21 13:33:39 发布
最新推荐文章于 2022-10-21 13:33:39 发布
阅读量213 收藏
点赞数
分类专栏： HTML DOM 文章标签： HTML DOM 属性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lengyuezuixue/article/details/80278226
版权

属性是节点(HTML 元素)的值，您能够获取或设置。

编程接口

可通过 JavaScript (以及其他编程语言)对HTML DOM进行访问。

所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

方法是您能够执行的动作(比如添加或修改元素)

属性是您能够获取或设置的值(比如节点的名称或内容)。

innerHTML 属性

获取元素内容的最简单方法是使用 innerHTML 属性。

innerHTML 属性对于获取或者替换 HTML 元素的内容很有用。

实例

   下面的代码获取id="intro"的<p>元素的innerHTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body> 
        <p id="intro">Hello World!</p> 
        <script>
            var txt=document.getElementById("intro").innerHTML;document.write(txt);
        </script> 
    </body>
</html>

 在上面的例子中，getElementById 是一个方法，而 innerHTML 是属性。

nodeName 属性规定节点的名称。

  • nodeName 是只读的

  • 元素节点的 nodeName 与标签名相同

  • 属性节点的 nodeName 与属性名相同

  • 文本节点的 nodeName 始终是 #text

  • 文档节点的 nodeName 始终是 #document

nodeValue 属性

nodeValue 属性规定节点的值。

  • 元素节点的 nodeValue 是 undefined 或 null

  • 文本节点的 nodeValue 是文本本身

  • 属性节点的 nodeValue 是属性值

获取元素的值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body> 
        <p id="intro">Hello World!</p> 
        <script>
            x=document.getElementById("intro");
            document.write(x.firstChild.nodeValue);
        </script>
    </body>
</html>

nodeType 属性

   nodeType 属性返回节点的类型。nodeType是只读的。

比较重要的节点类型有：

 

参考：

https://www.yuque.com/docs/share/58ef9c84-79d7-49c7-bba0-0eff83460c77

 

冷月醉雪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM的属性和样式
weixin_52603337的博客
12-13 2904
一，DOM 的属性 标签上的属性和对象属性是两组数据，系统默认的标签属性绝大多数都是支持成为属性。 标签默认属性不共通：class 其中name只属于表单元素的系统默认属性。 标签属性的命名规范：所有属性不能使用大写，都必须是小写，单词与单词之间使用-连接 属性值必须使用字符串，也不支持大小写。 定义标签属性有两种，一种直接描述在标签属性上，另一种通过js来完成 div.setattribute（"属性名"，"想要设置的属性值"）用来设置标签属性 div.getattribute（“属性名”
控制表格单元格信息
oboaix的专栏
12-05 135
language=javascript 是旧版本标记脚本语言用的。。 新版本改成了。。。type="text/javascript" 为了向下兼容。。language=javascript仍可用。。 详细属性： canHaveHTML 获取表明对象是否可以包含丰富的 HTML 标签的值。 charset 设置或获取用于解码对象的字符集。 clientHeight 获取对象的高度...
Html dom 赋值
weixin_30477293的博客
01-14 377
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <input type="b...
DOM 属性
yuhan20081021的专栏
06-02 965
DOM 属性 -- nodeName 文档里的每个节点都有以下属性。 nodeName:一个字符串，其内容是给定节点的名字。   var name = node.nodeName;    * 如果节点是元素节点，nodeName返回这个元素的名称    * 如果是属性节点，nodeName返回这个属性的名称    * 如果是文本节点，nodeName返回一个内容为#text 的字符串
dom属性和方法
nieou的专栏
06-23 710
DOM中节点的类型：     1： 文档节点表示整个 HTML 文档。基本上所有基于 DOM 的代码中都要用到的第一个节点类型是文档节点。文档节点 实际上并不是 HTML（或 XML）页面中的一个元素而是页面本身。因此在 HTML Web 页面中，文档节点就是整个 DOM 树。在 JavaScript 中，可以使用关键字 document 访问文档节点。        2：元素节点（element
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
12-19
Simple HTML DOM是一个方便的PHP插件，它提供了一个简单的接口，让我们能够使用DOM（Document Object Model）方式来操作HTML。这个插件允许我们像操作DOM对象一样处理HTML，而无需直接处理复杂的正则表达式，大大...
DOM下的节点属性和操作小结
12-11
属性： 1 .nodeName 节点名称，相当于tagName.属性节点返回属性名，文本节点返回#text。nodeName，是只读的。 2 .nodeType 值：1，元素节点；2，属性节点；3，文本节点。nodeType是只读的。 3 .nodeValue 返回一个...
CSS和DOM属性用法速查手册.doc
10-21
此外，还有许多其他CSS属性和DOM属性，如`display`（控制元素的可见性），`margin`和`padding`（控制元素边距和内填充），`fontSize`（设置字体大小），以及`value`（获取或设置表单元素的值）等，都是开发者日常...
Angular4学习教程之DOM属性绑定详解
08-28
Angular4学习教程之DOM属性绑定详解 Angular4学习教程之DOM属性绑定详解中，主要介绍了关于Angular4学习教程之DOM属性绑定的相关资料，文中通过示例代码介绍的非常详细，对...DOM属性的值可以改变，HTML的值不能改变
html中dom什么意思,dom属性是什么意思啊 html dom是什么意思，通俗易懂
热门推荐
weixin_42453050的博客
06-10 1万+
dom的全称是Document Object Model，翻译过来是文档对象模型的意思，是W3C组织推荐的处理可扩展标志语言的标准编程接口。 DOM 定义了访问 HTML 和 XML 文档的标准： "W3C 文档对象模型 (DOM) 是中立于平台和语言的接口。DOM属性和HTML属性的区别一、是否可变的区别： html属性中的值是不变的，dom属性的值是变化的。 二、适用场合不同： 核心DOM适合...
dom 基本属性
qq_44036956的博客
12-15 2605
dom 选择器 document.getElementsByTagName(); 根据元素标签获取元素集合 document.getElementsByClassName(); 通过class类名获取元素集合 document.getElementById(); 通过id获取元素 document.getElementsByName(); 通过name属性查找html元素集合 参数...
DOM的几个基本属性
lishichengyan的博客
09-01 584
1）childNodes 返回一个数组，用来检索子元素。 例子： function countBodyChildren(){ var body_element=document.getElementsByTagName("body")[0]; alert(body_element.childNodes.length); } window.onload=countBodyChildren
如何使用 HTML data-属性
allway2的博客
10-19 2985
数据属性是为 HTML 元素提供额外信息的好方法，但是使用 JavaScript 从这些属性中获取和设置数据才是真正使此功能有用的原因。数据属性功能强大，在我看来未得到充分利用，但与任何其他技术一样，请记住，数据属性只是工具带上的一个工具，它们应该是构成功能齐全的解决方案的更大方法组合的一部分。数据属性是我们可以设置的钩子，为我们的HTML提供与CSS和JavaScript通信的新方式。当其他人（或我们未来的自己）进入阅读我们的CSS时，我们的意图会更加清晰。例如，让我们在段落元素后面显示数据属性的值。
html属性和dom属性,DOM元素属性（Property）和特性（Attribute）的区别
weixin_33465310的博客
06-04 655
我们知道DOM的实现就是把一个HTML文档映射为一棵DOM树，而DOM树上的每个节点其实就是一个javascript对象。所以DOM元素属性和普通对象的属性一样，就是DOM对象这个javascript对象上的属性而已，我们可以直接在DOM对象上通过.或[]来获取和设置它们DOM元素的属性(property)是该对象所拥有的属性，而特性(attribute)则是该元素在HTML中的所拥有的特性节点。...
HTML5 data-* 自定义属性
王东电台
12-30 696
原文地址：http://www.cnblogs.com/dolphinX/p/3348458.html 在jQuery的attr与prop提到过在IE9之前版本中如果使用property不当会造成内存泄露问题，而且关于Attribute和Property的区别也让人十分头痛，在HTML5中添加了data-*的方式来自定义属性，所谓data-*实际上上就是data-前缀加上自定义的属性名，使用
常用DOM方法与属性
cheng198938的博客
03-20 451
常用DOM方法 getElementById() getElementsByTagName() getElementsByClassName() appendChild() removeChild() replaceChild() insertBefore() createAttribute() createElement() createTextNode() getAt
JavaScript之DOM常用属性及方法详解
最新发布
发果叁
10-21 8098
自定义属性目的∶是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。自定义属性获取是通过getAttribute ('属性〉获取。element.getAttribute(‘属性’)//自己定义的element.setAttribute(‘属性’,‘值’)//主要针对自定义属性removeAttribute(‘属性’)但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。H5给我们新增了自定义属性设置H5自定义属性H5规定自定义属性data-开头做为属性名并且赋值。
深入理解HTML DOM与JavaScript交互
- `DOMElement`接口包含元素节点的属性和方法，如`innerHTML`、`getAttribute`和`addEventListener`。 - `DOMWindow`接口代表浏览器窗口，提供访问全局`window`对象的方法，如`location`、`navigator`和`setTimeout`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值