精华内容
下载资源
问答
  • HTML属性和DOM属性的区别

    千次阅读 2019-12-09 15:09:44
    1、区分DOM属性和HTML属性: 1)HTML元素的属性大家都应该知道,比如:<img>元素的src,id等。 2)最终浏览器会解析HTML,构建DOM模型,也就是说浏览器会解析HTML元素为DOM元素。 3)JavaScript中获取到的都是...

    1、区分DOM属性和HTML属性:
    1)HTML元素的属性大家都应该知道,比如:<img>元素的id、src等。
    2)最终浏览器会解析HTML,构建DOM模型,也就是说浏览器会解析HTML元素为DOM元素。
    3)JavaScript中获取到的都是DOM元素,而不是HTML元素。
    4)HTML元素属性和DOM属性的名称大部分都相同,所以导致很多人错误的认为两者是相同的。
    5)区分HTML元素属性和DOM属性曾经是一件很考验经验和记忆力的事情,但是现在通过JQuery的attr()函数就可以忘记这些差异。

    2、使用JavaScript操作DOM属性:
    1)使用JavaScript操作DOM属性就是操作JavaScript对象属性,JavaScript对象属性是不需要声明的,有很多种方式可以访问属性。如下:

    myImg.src = "XXXXX";			//使用"."运算符
    myImg["src"] = "XXXXX";			//使用属性访问器
    
    var propName = "src";
    myImg[propName] = "xxxxxx"; 	//属性访问器支持变量
    

    2)因为提供了属性访问器,所以可以通过下面的方式遍历一个DOM对象的所有属性:

    var result = "";
    for(var p in myImg){
    	result = "属性名:" + p+ ",属性值:" + myImg[p] + "\n";
    }
    

    注意:事件或者函数也是对象的一个属性,如果对象一个DOM对象,就默认情况下拥有很多的属性。

    3、使用JavaScript操作HTML元素属性:
    使用JavaSctipt中的getAttribute()、setAttrbute()和removeAttribute(),可以操作HTML元素,比如:

    alert(myImg.getAttrbute("class"));
    myImg.setAttribute("class","myclass2");
    

    通过改变HTML属性class,会改变相应的DOM元素的className属性,但不是所有的HTML都有对应的DOM属性,比如自定义的HTML元素属性就无法转换成DOM属性,再如元素属性"className"就比较特别,因为className是和class对应的。

    4、关于获取html元素特性中使用getAttribute()和直接使用DOM元素的属性获取的区别:

    var header=document.getElementById('header');
    console.log(header.id);//header
    console.log(header.getAttribute('id'));//header
    console.log(header.title);//test
    console.log(header.getAttribute('title'));//test
    console.log(header.myTitle);//undefined
    console.log(header.getAttribute('myTitle'));//monster1935
    

    在本文示例中演示了通过两种方法获取HTML元素的标准特性及自定义特性,可以发现:
    getAttribute()既可以访问标准特性也可以访问自定义特性,而使用DOM元素本身属性访问html元素特性的时候只能访问标准特性。
    原因:
    HTML元素中只有标准特性才会以属性的形式添加到DOM对象中。
    特殊情况:
    有两类特性,虽然在DOM对象中有对应的属性名,但是属性的值与getAttribute()返回的值并不相同。
    1)style特性:
    使用DOM对象属性访问style的时候,返回的是一个对象,而使用getAttribute()获取的时候返回的是css文本。
    2)事件处理程序:(如onclick)
    使用DOM对象的属性访问的时候,返回的是一个JavaScript函数,而通过getAttribute()方法获取时返回的是javas代码。
    使用方法:
    只有在获取自定义特性的时候使用getAttribute()方法,操作DOM的时候,使用对象的属性来获取。

    二、HTML属性和DOM属性的区别?

    1、对于浏览器引擎而言,并不存在"HTML标签"这回事,本质是DOM节点对象,也不存在"HTML文档"这回事,其本质是DOM节点对象组成的文档树。浏览器引擎才是实际存储和渲染DOM节点对象的"大爷"。只是我们无法直接操作浏览器引擎,所以对这个本质并不熟悉(其实也不需要知道,但是得知道)。

    2、DOM节点对象是唯一的,但操作DOM节点对象的数据,却不止有一种方法。例如对于一个图像的宽度:

    • HTML可以通过<img>的width属性去定义;
    • JavaScript可以通过element.width去读取和修改;
    • 别忘了CSS,CSS也可以通过width属性去修改。

    HTML属性和JavaScript的DOM对象的属性,本质上都只是影响DOM节点对象数据的众多理由之一。
    多个原因影响同一个DOM节点的实质数据(多对一),请务必你记住这个本质理由。

    三、详细而言:

    1、HTML仅仅是文档树和节点对象的一种描述方法:

    • 浏览器的解析器部分,根据HTML直接把DOM文档树,交给浏览器引擎。
    • 用其它的方法,也可以描述DOM对象,例如:JSX(当然用其它方法描述DOM对象的时候,生成DOM文档树的过程,肯定会发生相应的修改)

    2、JavaScirpt中的DOM对象,仅仅是一种操作浏览器引擎中的DOM对象的接口:

    • JavaScript中的DOM对象,和浏览器引擎存储的DOM节点,本质上所指的不是一个东西。
    • 用户实际上仅仅有权操作JavaScript中提供的DOM对象。
    • JS引擎和浏览器引擎协作,确保了JavaScript的DOM对象,是引擎中DOM节点的一个原样映射
    • 这样用户就能通过操作JavaScript的DOM对象,透明的修改引擎中存储的DOM节点。
    • 而浏览器引擎本质上,仅仅负责在DOM树更新时承担重新渲染,实际上并不关心JS的存在。
    • 你如果用其他办法修改了引擎使用的DOM树,也能更新文档结构。(当然这种办法基本不存在…)

    至于HTML属性名和JavaScript DOM对象的属性名大多相似或等同,这仅仅是人为的方便。

    JavaScript DOM对象属性名和HTML属性名的近似,是JavaScript给Web开发者的恩惠。选择只记忆HTML属性名,然后记忆(或者是踩坑了再反查)JavaScript属性名中少量和HTML不同名的差异点,这是很自然的。

    你要去做一个大人,不要回头,不要难过。

    “知道自己已经不是小孩子了,却又还不是一个合格的大人。”

    展开全文
  • Dom属性和HTML属性的区别

    千次阅读 2018-09-12 00:24:34
    遇到这个问题的可以先参考这一篇文章,能帮你很好的理解DOM和HTML两种属性的区别之处:https://blog.csdn.net/u014291497/article/details/50639628 在angular2以上的版本的学习当中,你也许会遇到这样的问题。例如...

    w

    遇到这个问题的可以先参考这一篇文章,能帮你很好的理解DOM和HTML两种属性的区别之处:https://blog.csdn.net/u014291497/article/details/50639628

    在angular2以上的版本的学习当中,你也许会遇到这样的问题。例如代码:

    <input type = "text" value = '123456' (input) = 'onInput($event)'>

    要获取到input里的value值,在onInput方法中你可以通过这两种方法获取:

    1.获取input的HTML的value属性

    onInput(event){
        var val = event.target.getAttribute('value');
        console.log(val);
    }

    它的输出结果是

    123456

    当我们在输入框输入任何字符的时候,这个输出都不会改变。这是因为HTML属性是固定不会变的,只要你不用代码去更改它,它就永远是html初始化时候的初始值,也就是我们在input里面初始化的 value=“123456”;

    2.获取dom属性值value

    onInput(event){
        var val = event.target.value;
        console.log(val);
    }

    此时在输入框输入的字符串将会被console.log(val);的代码句打印出来,这是因为DOM属性是动态的,它的值随着用户的输入的改变而改变。

    以上就是我所理解的DOM属性和HTML属性的区别~

    展开全文
  • DOM属性的设置 和 属性值的获取

    千次阅读 2018-09-06 17:04:01
    node.setAttribute( ‘属性名’, 属性值); 此方法特殊方法 不需要 转换 class—–>class node[ ‘属性’ ]=属性值; 此方法特殊方法 需要 转换 class—–>className for 属性值 得获取: node.属性名; ...
    <style type="text/css">
            .one{width: 300px;height: 300px;border: 1px solid red;padding :5px;}
    </style>
    <body>
        <img src="images/2.jpg" alt="" id="pic">
        <div id="box"></div>
    </body>
    <script>
            var img=document.getElementById('pic')
            var o=document.getElementById('box');
    </script>
            //方法一   node.属性名=属性值
             img.src='images/1.jpg';//属性设置
             img.className='one'; //属性值获取
    
            //取值  node.属性名
            console.log(img.src);//绝对路径

        //方法二  node.setAttribute('属性名',' 属性值')
    
                img.setAttribute('src','images/1.jpg');
                img.setAttribute('class','one');
                img.setAttribute('alt','提示');
    
        //取值  node.getAttribute('属性名');不需要转换
                 var cls=img.getAttribute('class');
                 var s=img。getAttribute('src');//相对路径
                console.log(cls);
                console.log(s);

            //方法三  node['属性']="值"
    
                    img['src']='images/1.jpg';
                    img['title']='我是图片';
                    img['className']='one';
            //取值
                console.log(img['src']);//绝对路径
                console.log(img['title']);

    属性的设置:
    node.属性名=属性值; 此方法特殊方法需要转换 class—–>className
    node.setAttribute( ‘属性名’, 属性值); 此方法特殊方法不需要转换 class—–>class
    node[ ‘属性’ ]=属性值; 此方法特殊方法需要转换 class—–>className for

    属性值得获取:
    node.属性名;
    node.getAttribute(属性名);
    node[‘属性名’];

    注意:属性的设置和获取方法建议:配对使用

    展开全文
  • 这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById(“id”);...如果给子组件加ref,然后获取到该DOM元素之后改变相应的自定义属性的值,vue会报错: Avoid mutating a prop dir
  • 一个小的DOM实现,其中实现了文档中的大多数DOM属性和方法。 例子 var document = require ( "dom-lite" ) . document ; var el = document . createElement ( "h1" ) ; el . id = 123 ; el . className = "large" ...
  • 本文作为第一篇,介绍DOM提供的与尺寸大小相关的DOM属性,提供一些兼容性处理的方法,并结合常见的场景说明如何正确运用这些属性。 1. 正确理解offsetWidth、clientWidth、scrollWidth及相应的height属性 假设某一个...
  • html属性中的值是不变的,dom属性的值是变化的,那么angular中的事件绑定,属性绑定(差值表达式:{{}}这种形式)其实是dom属性的一套东西,为何?因为绑定的东西是可变的 ,html属性又不是可变的,所以只能用dom...

    html属性中的值是不变的,dom属性的值是变化的,那么angular中的事件绑定,属性绑定(差值表达式:{{}}这种形式)其实是dom属性的一套东西,为何?因为绑定的东西是可变的 ,html属性又不是可变的,所以只能用dom属性。

     

    展开全文
  • 下面小编就为大家带来一篇浅谈JS读取DOM对象(标签)的自定义属性。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 1.节点属性的设置 对象.属性名=值; 对象[属性名]=值; obj.setAttribute(pro,value) 2.节点属性值的获取: 对象.属性名 对象[属性名] obj.getAttribute(pro) 注意:前两种设置和获取...
  • 解决webstorm调试js时Evaluate脚本获取dom属性丢失问题,百思不得其解,最后找到,原因出在webstorm调用chrome调试接口时设置了一个"ownProperties":true,设置为false即可这需要修改chrome调试插件源代码修改成这样就...
  • DOM属性和HTML属性的区别

    万次阅读 2017-03-14 22:09:58
    大概意思就是angular的绑定是绑定到Property上的,对于HTML属性,比如colspan等,这些属于HTML属性,在DOM属性上没有相对应的属性。 Attribute属于HTML,可以是任意属性,赋值及取值使用 setAttribute(); ...
  • 1. attr(属性名) //获取属性的值(取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined ) 2. attr(属性名, 属性值) //设置...
  • DOM属性和HTML属性区别&&prop和attr区别

    千次阅读 2018-09-19 17:06:12
    ocument.getElementById('test').getAttribute('custom-attr') 或 $('#test').attr('custom-attr')一、DOM属性和HTML属性区别  1、HTML元素的属性,比如&lt;img&gt;元素的src,id等,最终浏览器会解析...
  • 文章目录文章参考问题描述模板...今天想总结一下angular基础知识,想自己写一个自定义myname属性的demo,类似于jquery那样在某个element对象中添加属性,结果angular编译报错,提示是说myname不是div的属性 模板绑定...
  • 一、dom属性操作 属性获取或属性设置 1. 操作类名称 属性的获取 输出当前对象的类名称 <button class="btn list" name="but" id="data">按钮</button> <script> var btn = document....
  • DOM元素的三种属性

    千次阅读 2018-12-05 10:54:23
    系统属性,自定义属性,临时属性
  • 主要介绍了vue监听dom大小改变案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • JS中的dom属性操作

    千次阅读 2018-09-19 21:44:02
    在js中,setAttribute(&amp;quot; &amp;quot; , &amp;quot; “)和getAttribute(” &amp;quot;);不能分开单独使用若想使用setAttribute()则必须要先使用getAttribute()得到属性.
  • 原生js监听dom节点属性变化

    千次阅读 2020-09-15 13:11:12
    // 选择需要观察变动的节点 const targetNode = document.getElementById('js-toc'); // 观察器的配置(需要观察什么变动) const config = { attributes: true, childList: true, subtree: true };...
  • Vue 虚拟DOM与key属性

    千次阅读 2018-12-04 22:30:34
    Vue 虚拟DOM与key属性 Vue.js 2 中使用了Virtual Dom(虚拟DOM)来更新DOM节点,提升渲染性能。 要了解Vue中的key属性,我们先来总结一下虚拟DOM以及它的Diff算法。 (1)虚拟DOM 浏览器加载一个HTML文件的...
  • HTML属性与DOM属性的区别

    千次阅读 2016-10-05 23:33:50
    对于浏览器引擎而言,并不存在“HTML标签”这回事,其本质是DOM节点对象。也并不存在“HTML文档”这回事,其本质是DOM节点对象组成的文档树。浏览器引擎只是存储和渲染DOM节点对象。
  • 获取DOM对象(标签,元素,节点)的三种方法 1.document.getElementById(); 根据元素的id获取当前的标签 例如 &lt;p id="demo"&gt;&lt;/p document.getElementById('demo');获取ID为demo的...
  • dom监听属性的变化

    千次阅读 2017-08-01 16:30:13
    方法三 es5 异步监听 当dom加载完以后执行 <!DOCTYPE html> <title>MutationObserver <script type="text/javascript" src="jquery.js"></script>  onclick="window.frames['some_one']...
  • DOM获取和设置属性

    千次阅读 2018-09-24 11:40:23
    三种类型节点:元素节点,文本节点,属性节点 &lt;p title="a gentle reminder"&gt;不要忘记买东西&lt;/p&gt; 上行代码中:&lt;p&gt;元素为元素节点,  title="a ...
  • 获取dom的最终的css属性

    千次阅读 2017-11-10 00:38:17
    需求我们有的时候需要测试看一下属性是否设置成功,所以需要通过dom去获取css样式。但是,如果使用原生去获取的话,会发现只有在dom身上设置的才能够获取的到,如dom.style.width,只有直接写到标签上,才能够获取的...
  • 浅谈原生JS操作DOM常用的属性和方法

    千次阅读 2017-03-13 15:29:08
    ⑩ 修改CLASS属性 document.getElementById("***").className = "***"; document.getElementById("***").className = ""; ⑪ 修改文本 document.getElementById("***").innerHTML = "***"; ⑫ ...
  • HTML DOM属性的各种操作方法

    千次阅读 2017-06-15 19:44:32
    DOM

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 414,902
精华内容 165,960
关键字:

dom属性