精华内容
参与话题
问答
  • 在前端里,想要对静态的HTML变得更加的动态,就必须要对HTML的dom进行操作,dom犹如一个树,树的最底层是文档节点,这个节点顺着上来就到了html节点,也就是根节点。这个根节点有两个分支,一个是body,另一个是head...

           在前端里,想要对静态的HTML变得更加的动态,就必须要对HTML的dom进行操作,dom犹如一个树,树的最底层是文档节点,这个节点顺着上来就到了html节点,也就是根节点。这个根节点有两个分支,一个是body,另一个是head。head里面有很多个子节点,必须要有的是title节点,其他常见的有meta、style、link等,而body里面也有无数个节点。就拿body里面的p节点来讲,里面就有文本,这个文本也是一个节点,称为#text节点。这些就是整个dom树的大概。


            在了解了这些节点后,当我们想要获取一个节点的名字或者改变节点里的属性值或文本值的时候怎么办?这里就要提nodeName、nodeValue和nodeType了。nodeName是只读属性,不能写入和修改,它能够获取元素节点的标签名、属性节点的属性名、文本节点的#text和文档节点的#document。而nodeValue能够写入,它能够获取文本节点的内容、属性节点的属性值,在元素节点里它获取的结果是undefined或者null,nodeValue可以被textContent属性替换。而nodeType返回的是节点类型,不能修改的,常见的节点类型有:

            详细代码如下:

    <body>
    	<p id='ha'>a</p>
    </body>
    <script type="text/javascript">
    	var a = document.getElementById('ha')
    	console.log(a.nodeName)
    	console.log(a.firstChild.nodeValue = 'ha')
    	console.log(a.nodeType)
    </script>

            那么我们想对节点进行操作怎么办,这里有几个属性:getAttributeNode、setAttributeNode和removeAttributeNode。这三个方法分别表示为:getAttributeNode:获取一个节点作为对象、setAttributeNode:设置一个节点和removeAttributeNode:删除一个节点。这三个属性在DOM4版本中已经不推荐使用了,在DOM4版本中推荐使用的是getAttribute、setAttribute和removeAttribute。在DOM4里,属性已不在作为一个特殊的节点了。下面的例子是展示的是新的标准的写法:

            首先是getAttribute,它与getAttributeNode不同的是,返回的是属性值而不是一个对象:

    <body> 
    	<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div> 
    </body>
    <script> 
    	var a = document.getElementById("sss").getAttribute("value"); 
    	console.log(a)
    </script>
            而getAttributeNode想要得到与上面相同的结果,需要这样写:
    var a = document.getElementById("sss").getAttributeNode("value"); 
    console.log(a.value)

            然后是setAttribute,它是设置属性和属性值,而setAttributeNode是设置一个节点,setAttributeNode不如setAttribute灵活:

    <body> 
    	<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div> 
    </body>
    <script> 
    	var a = document.getElementById("t")
    	a.firstChild.setAttribute('ha','haha'); 
    	console.log(a.innerHTML)
    </script>
            而setAttributeNode想要实现上面的例子,首先先要创造一个属性名,然后给属性赋值,最后添加到节点上:
    var a = document.createAttribute('ha')
    a.nodeValue = 'haha'
    var b = document.getElementById('t')
    b.firstChild.setAttributeNode(a)
    console.log(b.innerHTML)

            最后是removeAttribute,与removeAttributeNode相同的是都是删除一个属性,但是区别是,前者没有返回值,而后者以attr对象形式返回被删除的属性:

    <body> 
    	<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div> 
    </body>
    <script> 
    	var a = document.getElementById("t")
    	a.firstChild.setAttribute('ha','haha'); 
    	a.firstChild.removeAttribute('ha')
    	console.log(a.innerHTML)
    </script>
            由于removeAttributeNode的参数是对象,所以用getAttributeNode来获得这个节点对象,所以本身这个方法用的比较费劲:
    var a = document.getElementById("t")
    a.firstChild.setAttribute('ha','haha'); 
    var b = a.firstChild.getAttributeNode('ha')
    a.firstChild.removeAttributeNode(b)
    console.log(a.innerHTML)

            基础铺好了好,就介绍标题里面所提的attributes了。这个attributes返回的是某个节点里所有属性的集合,返回的是一个NamedNodeMap对象,在这个对象里分两部分,两部分的值都相同只是键不同,一部分的键名以0开始依次增加排列,另一部分的键名则是以属性名来命名的,如上面的这个HTML代码,把下面的这段代码放到控制台那里输出就会看到这两部分:

    document.getElementById('sss').attributes

            不过好可惜,attributes属性在DOM4里面被列为不推荐使用,所以这里也没必要深究这个attributes了。这里只列一下attributes的一些常见用法,如下面的两个得到的都是同一个结果:

    <body>
    	<p id="intro">Hello World!</p>
    </body>
    <script type="text/javascript">
    	x=document.getElementById("intro");
    	console.log(x.attributes['id'].nodeName);
    	console.log(x.attributes.getNamedItem("id").nodeName);
    </script>

            最后楼主翻阅MDN的时候,发现nodeName、nodeValue和nodeType都不推荐使用,nodeName被name替换,nodeValue被value替换。不得不感慨DOM4简直想要来个大变脸。

    参考文章:MDN DOM4中不推荐使用的attr对象的某些属性  js中的attributes     


    展开全文
  • 3.attributes例 3.1(getElementsByNameNodeListAttributeIEFF.html)<HTML><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/></HEAD><BODY><DIV ID=...

    3.attributes
    例 3.1(getElementsByNameNodeListAttributeIEFF.html)
    <HTML>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    </HEAD>
    <BODY>
    <DIV ID="RESULT"></DIV>
    <FORM onClick="handleClick(event)">
        <INPUT TYPE="checkbox" VALUE="A" NAME="BOX" id="BOX_A" checked="true">Selection A<BR>
        <INPUT TYPE="checkbox" VALUE="B" NAME="BOX" id="BOX_B">Selection B<BR>
        <INPUT TYPE="checkbox" VALUE="C" NAME="BOX" id="BOX_C">Selection C<BR>
        <INPUT TYPE="checkbox" VALUE="D" NAME="BOX" id="BOX_D">Selection D<BR>
    </FORM>
    <SCRIPT>
        function handleClick(event)
        {
            myString='';
            /* because there is no this method of getElementsByID, ID is unique
             Document.getElementsByName() (Method)

             An accessor method for retrieving objects from within the DOM hierarchy specifically according to their NAME value.
             Property/method value type: NodeList object
             JavaScript syntax: - myDocument.getElementsByName(aName)
             Argument list: aName The name of the element to be retrieved
             */
    /*马克-to-win:event.target是最上层的元素,注意这里点击时,一定得点中方格里,如果点在方格外面,则event.target.id 是空值。*/
               var event = event||window.event;   
               var eSource =event.srcElement||event.target;        
            nodeListBox=document.getElementsByName("BOX");
            /*Element.attributes[] (Collection)
             A reference to a collection of attribute objects for the HTML tag that the Element object represents.
             Property/method value type: Attributes object

    更多请见:https://blog.csdn.net/qq_43650923/article/details/103050580

    展开全文
  • Attributes

    2008-11-19 21:50:00
    Attributes getAttr setAttr attributeExists deleteAttr renameAttr listAttr attributeQuery Time currentUnit currentTime Playback play; play -forward false; play -query -state; play -s
    Attributes

    getAttr

    setAttr

    attributeExists

    deleteAttr

    renameAttr

    listAttr

    attributeQuery

     

    Time

    currentUnit

    currentTime

    Playback

    play;

    play -forward false;

    play -query -state;

    play -state off;//to stop

    playbackOptions

     

    Animation

    keyframe

    isAnimCurve

    listAnimatable

    setInfinity

    keyTangent

    copyKey

    pasteKey

    cutKey

     

    Skeleton

    joint

    joint -position ....

    insertJoint ....

    xform

    removeJoint

    delete

    展开全文
  • attributes() 函数

    千次阅读 2019-04-16 10:04:26
    查看更多 https://www.yuque.com/docs/share/a6cc2c96-9824-4903-acb8-284f4ebeb4fb
    展开全文
  • 特性(Attributes)

    2016-11-25 15:53:00
    定义:特性本质上就是有一种类,通过添加特性,就可以实例化这个特性类; 我们主要讲一下如何自定义特性,定义的方式和普通的类定义方式一致,但是,第一:需要继承标准特性类第二:需要添加标准特性,用来限制特性...
  • Rails中的 attributes 方法, 数据库对象转换成 hash attributes ===> to_hashmerber = Member.firstMember Load (0.5ms) SELECT `members`.* FROM `members` ORDER BY `members`.`id` ASC LIMIT 1 => #, name: 786
  • 在 Python 里请不要使用属性(attributes)读取方法(getters 和 setters) 如果你之前学过其它语言(比如 Java,c++),你可能会想要在你的类里面定义属性读取方法。直接使用属性就可以了 >>> class ...
  • Vue 组件接收额外的属性 Attributes 替换 Attributes Vue 中的组件可以通过指定Props接收父级传入的属性。 也可以接收非Props 指定的属性 Attributes。 它会默认替换 或 合并到组件模板渲染后的DOM根元素上。 示例:...
  • vueattributes, methods ,events ,slots解释

    千次阅读 2018-06-01 19:13:39
    学习vue,一定要对这四个名词理解分别是attribute, methods ,events ,slot咱们分别来介绍一下,都是我从网上找的,汇总起来方便自己查阅!
  • 最近在研究BLE技术发现了这个东西有一点不明白,有一个GattAttributes的文件 /** * This class includes a small subset of standard GATT attributes for demonstration purposes. */ public class ...
  • Apache Commons项目简介之Attributes

    千次阅读 2009-04-01 12:17:00
    Apache Commons项目简介之Attributes0.简介Apache Commons项目是专注于开发可重用的Java组件。Apache Commons项目由三部分组成:Commons Proper - 可重用Java组件库。Commons Sandbox - Java组件开发工作空间。...
  • vue中非props属性 一个非 prop 的 attribute 是指传向一个组件,但是该组件并没有相应 prop 定义的 attribute。 举个例子: 自定义一个test组件,并接受父组件传来的test1 test2 class style 属性,其中 test1 属性...
  • iOS中文本属性Attributes的用法

    千次阅读 2017-01-12 16:59:13
    iOS中用到文本属性Attributes的地方还是很多的,这里对文本属性做一些归纳,以免记不住用到的时候到处找资料:如下是所有的文本属性:NSFontAttributeName //设置字体大小 NSParagraphStyleAttributeName //设置段落...
  • Is there an alternative to update_attributes that does not save the record? 有没有替代update_attributes
  • ASP.NET Attributes属性

    千次阅读 2007-07-28 00:46:00
    可以操作到控件配置代码,比如 在cs中,用 this.bu1.Attributes["Style"]取到值xxxxxTop3 楼wocaobaby(wocaonima)回复于 2006-12-21 21:37:23 得分 0 如果我把他们设置为textbox.attributes["text"]我想设置他text...
  • vue input 警告 提示为:输入元素应该具有自动完成属性 解决方案为: autocomplete &lt;input :type="type" :value="value" :placeholder="placeholder" :name=&...
  • (1)Driver Attributes与driver_create_file struct driver_attribute { struct attribute attr; ssize_t (*show)(struct device_driver *driver, char *buf); ssize_t (*store)(str...
  • ![图片说明](https://img-ask.csdn.net/upload/201606/20/1466407956_295424.png) attributes什么意思啊? 他是jquery里的,还是easyui特有的属性?
  • 关于FileAttributes

    千次阅读 2016-02-01 22:20:29
    File.GetAttribute(string path);//获取文件属性 File.SetAttribute(string path,FileAttributes ...FileAttributes attributes = File.GetAttributes(path); //是否存在“隐藏”属性 if ((attributes & FileAttribu
  • SECURITY_ATTRIBUTES

    千次阅读 2012-05-11 19:41:52
    typedef struct _SECURITY_ATTRIBUTES  {  DWORD nLength;   //结构体大小,可用sizeof取得  LPVOID lpSecurityDescriptor;  //指向一个对象的安全描述符 该安全描述符控制对象的共享 如果为NULL 则...

空空如也

1 2 3 4 5 ... 20
收藏数 362,632
精华内容 145,052
关键字:

attributes