DOM中常用的属性

最新推荐文章于 2023-02-22 07:16:04 发布
最新推荐文章于 2023-02-22 07:16:04 发布
阅读量1.8k 收藏 1
点赞数 1
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aomize/article/details/78220575
版权

DOM中常用的属性

1.innerHTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <a id="link" href="http://www.baidu.com">百度</a>

    <script type="text/javascript">
        var node = document.getElementById('link');

        console.log(node.innerHTML);   // 百度
    </script>
</body>
</html>

（2）value

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <input id="name" type="text" name="" placeholder="请输入用户名">

    <script type="text/javascript">
        window.onload = function () {
            var userName = document.getElementById('name');

            userName.onchange = function () {
                console.log(userName.value);
            }
        };
    </script>
</body>
</html>

这里写图片描述

（3）parentNode

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div>
        <li><a href="#">hello</a></li>
        <li><a href="#">world</a></li>
    </div>

    <script type="text/javascript">
        window.onload = function () {
            var item = document.getElementsByTagName('li')[0];
            console.log(item.parentNode);
        };
    </script>
</body>
</html>

这里写图片描述

（4）childNode

（5）nodeName

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div id="parent">
        <li id="item"><a id="link" href="#">hello</a></li>
        <li id="item"><a id="link" href="#">world</a></li>
    </div>

    <script type="text/javascript">
        window.onload = function () {
            var divDom = document.getElementById('parent');
            var liDom = document.getElementById('item');
            var aDom = document.getElementById('link');

            console.log(divDom.nodeName);  // DIV
            console.log(liDom.nodeName);   // LI
            console.log(aDom.nodeName);    // A
        };
    </script>
</body>
</html>

（6）nodeValue

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div id="parent">
        <li id="item"><a id="link" href="#">hello</a></li>
        <li id="item"><a id="link" href="#">world</a></li>
    </div>

    <script type="text/javascript">
        window.onload = function () {
            var divDom = document.getElementById('parent');
            var liDom = document.getElementById('item');
            var aDom = document.getElementById('link');

            console.log(divDom.nodeValue);  // null
            console.log(liDom.nodeValue);   // null
            console.log(aDom.nodeValue);    // null
        };
    </script>
</body>
</html>

nodeType

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div id="parent">
        <li id="item"><a id="link" href="#">hello</a></li>
        <li id="item"><a id="link" href="#">world</a></li>
    </div>

    <script type="text/javascript">
        window.onload = function () {
            var divDom = document.getElementById('parent');
            var liDom = document.getElementById('item');
            var aDom = document.getElementById('link');

            console.log(divDom.nodeType);   // 1
            console.log(liDom.nodeType);    // 1
            console.log(aDom.nodeType);     // 1
        };
    </script>
</body>
</html>

（完）

aomize
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript之DOM常用属性及方法详解
发果叁
10-21 8027
自定义属性目的∶是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。自定义属性获取是通过getAttribute ('属性〉获取。element.getAttribute(‘属性’)//自己定义的element.setAttribute(‘属性’,‘值’)//主要针对自定义属性removeAttribute(‘属性’)但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。H5给我们新增了自定义属性设置H5自定义属性H5规定自定义属性data-开头做为属性名并且赋值。
js基础之DOM中document对象的常用属性方法详解
10-21
下面小编就为大家带来一篇js基础之DOM中document对象的常用属性方法详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
dom 常用属性
qq_43643182的博客
06-08 1583
DOM常用属性： <!-- 1.nodeName 属性 :节点名称 nodeName 是只读的 元素节点的 nodeName 与标签名相同 属性节点的 nodeName 与属性名相同 文本节点的 nodeName 始终是 #text 文档节点的 nodeName 始终是 #document 2.nodeValue 属性：节点的值。 元素节点的 nodeValue 是 undefined 或 null 文本节点的 nodeValu
DOM属性总结
qq_59721336的博客
10-11 2545
firstChild 第一个子节点 （文本节点+元素节点）firstElementChild 第一个子元素节点lastChild 最后一个子节点 （文本节点+元素节点）lastElementChild 最后一个子元素节点1.获取元素的属性值1) // element.属性;获取内置属性(元素本身自带的属性)2) // element.getAttribute('属性');主要获得自定义的属性(标准),程序员自定义的属性2.设置元素的属性值1) // element.属性='值';
DOM常用属性
XYZS_520的博客
10-21 693
快捷尺寸 DOM常用的相关属性 clientWidth、clientHeight 该属性是每一个元素都有的属性，读取到的是该元素的宽度+padding、高度+padding offsetWidth、offsetHeight 该属性是每一个元素都有的属性，读取到的是该元素的宽度+padding+border、高度+padding+border clientLeft、 clientTop 该属性是每...
DOM常见属性
哪有那么可爱的小蝈蝈的博客
10-20 894
DOM常见属性 以下属性必须保证DOM已经添加在页面中，如果没有添加则无法调用 client(客户) offset(偏移) scroll(滚动条) 宽 clientWidth offsetWidth scrollWidth 高 clientHeight offsetHeight scrollHeight client(客户) offset(偏移 scroll(滚动条) 位 clientLeft offsetLeft scrollLeft 置 clien
DOM操作一些常用的属性汇总
12-09
【DOM操作常用属性详解】 DOM（Document Object Model）是HTML和XML文档的一种标准表示形式，它将文档解析成一个可编程的节点树，允许开发者通过JavaScript等脚本语言对文档内容进行读取、修改和操控。DOM的核心...
详谈javascript中DOM的基本属性
10-24
DOM节点是一个对象，它有着一些属性。其中有些是只读的，有些可以直接进行更改（updated on-the-fly）。今天我们就来具体探讨下DOM的基本属性，希望对大家能有所帮助
DOM下的节点属性和操作小结
12-11
属性： 1 .nodeName 节点名称，相当于tagName.属性节点返回属性名，文本节点返回#text。nodeName，是只读的。 2 .nodeType 值：1，元素节点；2，属性节点；3，文本节点。nodeType是只读的。 3 .nodeValue 返回一个...
DOM对象的常用属性
Albert_ChengXY的博客
08-12 474
获取div宽高 元素.clientWidth 客户宽高 元素.clientHeight 元素.offsetWidth 偏移宽高 元素.offsetHeight 元素.scrollWidth 滚动宽高 元素.scrollHeight 以上所有的宽高，基于元素被加入到DOM渲染树后 也就是被添加在页面中以后，才可以获取 并且图片这类后加载元素无法获取宽高(异步原因造成) 异步 当运行某个需要一段时间完成的内容时、可以先继续向后执行代码，加载和执行后面是同时进行的 同步 上一步执行完成再执行下一步 元素的宽
DOM 对象所有属性方法介绍，看这一篇就够了！
酷奇的博客
02-22 4532
注意，在 1 级 DOM 中，HTMLDocument 定义了一个名为 getElementById() 的非常有用的方法。这些集合属性都源自于 0 级 DOM。很多属性和方法都是 HTMLCollection 对象（实际上是可以用数组或名称索引的只读数组），其中保存了对锚、表单、链接以及其他可脚本元素的引用。Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。write() 方法值得注意，在文档载入和解析的时候，它允许一个脚本向文档中插入动态生成的内容。
DOM增删改操作
407指导员
10-31 342
dom的增删改操作 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>dom增删改</title> <link rel="stylesheet" type="text/css" href="style/css2.css"/&gt
dom对象常用的属性和方法有哪些？
weixin_34034670的博客
06-02 2179
dom对象常用的属性和方法有哪些？ 一、总结 一句话总结： 1、document属性和方法：document的属性有head，body之类，方法有各种获取element的方法 2、element的属性和方法：属性比如style，innerHTML和固有属性，方法比如各种动态操作元素，比如createElement，还有操作属性的set、get、remove、create解Attribute...
DOM Element 属性和方法
weixin_30651273的博客
11-06 138
属性 / 方法描述 element.accessKey 设置或返回元素的快捷键。 element.appendChild() 向元素添加新的子节点，作为最后一个子节点。 element.attributes 返回元素属性的 NamedNodeMap。 element.childNodes 返回元素子节点的 NodeList。 ...
DOM常用的属性
等，你的到来。
10-19 1430
offsetHeight height+padding+border，当前对象的高度 clientHeight 获取对象可视高度，不包括滚动条，不包括边框 scrollHeight 获取对象的滚动高度/内容总高度 offsetWidth clientWidth scrollWidth offsetTop 当前对象相对于定位父级的top值 clientTop 获取对象上边框的bor
DOM常用属性【DOM】
QQ1012421396的博客
08-20 5092
DOM属性：     DOM属性是节点（HTML 元素）的值，您能够获取或设置。文档里的每个节点都有以下3个属性：nodeName, nodeType, nodeValue。更有一些常用属性：innerHTML，parentNode，childNodes ，attributes ，firstChild，lastChild， nextSibling， previousSibling， leng
dom的常见属性和方法
qq_38409944的博客
02-07 651
牢记：js脚本应该只用来充实文档内容 要避免使用DOM技术创建核心内容 需要对文档现有信息进行检索的时候下面DOM方法最有用： getElementById getElementByTagName getAttribute 元素.firstChild.nodeValue 元素的第一个节点的内容 比如 可以得到p标签中的文本节点 因为p里面的文字内容实在文本节点里面 在需要把信
HTML DOM之属性的各种操作方法
tian361zyc的博客
06-15 2651
DOM
常用DOM方法与属性
cheng198938的博客
03-20 446
常用DOM方法 getElementById() getElementsByTagName() getElementsByClassName() appendChild() removeChild() replaceChild() insertBefore() createAttribute() createElement() createTextNode() getAt
uni dom中判断属性类型
最新发布
06-11
在uni-app中，我们可以使用 `typeof` 和 `instanceof` 来判断DOM元素的属性类型。 例如，我们可以使用 `typeof` 来判断一个元素的属性是否为字符串类型： ```javascript if (typeof document.querySelector('#...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值