操作dom对象模型思路

19 篇文章 2 订阅
17 篇文章 0 订阅
<!DOCTYPE html>
<html>
      <head>
            <meta charset="UTF-8">
            <title></title>
      </head>
      <body>
            <input id="p" type="button" value="我是一个按钮" onclick="myFunction()"/>

            <p id="demo">单机可以显示按钮的名称</p>

            <script>
                  function myFunction(){
                        //通过document对象获取html元素节点(即元素对象)
                  var inputElement=document.getElementById("p");
                  var pElement=document.getElementById("demo");

                        //通过-元素对象-获取指定属性的节点(即属性对象),再通过-属性对象-获取指定属性的值
                         //getAttributeNode() 已不赞成使用。请使用 getAttribute() 替代
                  pElement.innerHTML=inputElement.getAttributeNode("value").nodeValue;


                  //或者直接通过-元素对象-获取该元素指定的属性值,而不是属性节点(即属性对象)
                  //pElement.innerHTML=inputElement.getAttribute("value");
                         
                  //又或者直接通过元素对象指定的属性获取,这种方式最简洁,用得次数也最多,
                    //但是也有缺点,就是.后面若是关键字就挂了
                  //pElement.innerHTML=inputElement.value;

                    //注意,innerHTML只能接收文本,所以需要文本对象转换成文本内容
                  //var buttonValue=inputElement.getAttributeNode("value").value;
                  //pElement.innerHTML=buttonValue.valueOf();
                  }
            </script>
      </body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值