首页 > web前端 > js教程 > javascript dom对象专属属性实例汇总

javascript dom对象专属属性实例汇总

伊谢尔伦
发布: 2017-07-21 13:10:21
原创
1494 人浏览过

专属属性指那些专属于某种标签的属性。比如 标签,有href和target属性。 有src属性;

有entype以及action属性……

a_element.href  返回当前节点指向的超链接

再来看看较为常用的通用方法:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .form_style{
      color: #5b5b5b;
      font-size: large;
    }
    p {
      color: #5b5b5b;
      font-size: larger;
    }
  </style>

</head>


<body>
  <form id=&#39;first_form&#39; class="form_style" name="cangjingge" >
    请选择功法:<br/>
    <input type="radio" name="gongfa" value="jysg">九阳神功<br/>
    <input type="radio" name="gongfa" value="qkdny">乾坤大挪移<br/>
    <input type="radio" name="gongfa" value="khbd">葵花宝典<br/>
    <input type="radio" name="gongfa" value="xxdf">吸星大法<br/>
  </form>
  <p>少侠请三思!!!</p>

  <script>
    //js演示代码请添加至此
    
  </script>

</body>


</html>
登录后复制

1 element.appendChild(nodeName) 向元素添加新的子节点,作为最后一个子节点,并返回该子节点。如需向 HTML DOM 添加新元素,您首先必须创建该元素,然后把它追加到已有的元素上。

js演示代码:


var a=document.getElementById(&#39;first_form&#39;);   
var textnode=document.createTextNode("慎重选择");  
a.appendChild(textnode)
登录后复制

2 element.getAttribute(para) 返回元素节点的指定属性值。

js演示代码:


var a=document.getElementById(&#39;first_form&#39;);
console.log(a.getAttribute(&#39;name&#39;))      //控制台输出name的值
登录后复制

3 element.getAttributeNode(para) 返回指定的属性节点。

js演示代码:


var a=document.getElementById(&#39;first_form&#39;);
console.log(a.getAttributeNode(&#39;name&#39;))      //控制台输出name属性节点
登录后复制

4 element.getElementsByTagName(para) 返回拥有指定标签名的所有子元素的集合。

js演示代码:


var a=document.getElementById(&#39;first_form&#39;);
console.log(a.getElementsByTagName(&#39;input&#39;))      //控制台输出
登录后复制

5 element.hasAttribute(para) 如果元素拥有指定属性,则返回true,否则返回 false。

js演示代码:


var a=document.getElementById(&#39;first_form&#39;);
console.log(a.hasAttribute(&#39;name&#39;))      //控制台输出
登录后复制

6 element.insertBefore(insertNode,appointedNode) 在指定的已有的子节点之前插入新节点。

js演示代码:


var a=document.getElementById(&#39;first_form&#39;);
    var inputList=document.getElementsByTagName(&#39;input&#39;);
    var newNode=document.createElement(&#39;input&#39;);
    var newNode2=document.createTextNode(&#39;天马流星拳&#39;);
    var br=document.createElement(&#39;br&#39;);
    newNode.type=&#39;radio&#39;;
    newNode.name=&#39;gongfa&#39;;
    newNode.value=&#39;tmlxq&#39;;
    a.insertBefore(newNode,inputList[2]);
    a.insertBefore(newNode2,inputList[3]);
    a.insertBefore(br,inputList[3]);
登录后复制

7 element.removeAttribute() 从元素中移除指定属性。

js示例代码:


var a=document.getElementById(&#39;first_form&#39;);
a.removeAttribute(&#39;name&#39;);
console.log(a.hasAttribute(&#39;name&#39;))
登录后复制

8 element.removeChild() 从元素中移除子节点。移除的节点虽然不在文档树中了,但其实还在内存中,可以随时被引用。

js示例代码:


var a=document.getElementById(&#39;first_form&#39;);
    a.removeChild(a.childNodes[3]);
登录后复制

9 element.replaceChild(newNode,replaceNode) 把指定节点替换为新节点。

10 element.setAttribute(attrName,attrValue) 把指定属性设置或更改为指定值。

js示例代码:


var a=document.getElementById(&#39;first_form&#39;);
    a.setAttribute(&#39;name&#39;,&#39;shaolinsi&#39;);
    console.log(a.name)
登录后复制

11 element.setAttributeNode() 修改指定属性节点

js示例代码:


var a=document.getElementById(&#39;first_form&#39;);
    var attr = document.createAttribute(&#39;id&#39;);
    attr.value=&#39;the_first&#39;;
    a.setAttributeNode(attr);
     console.log(a.id)
登录后复制

12 nodelist.item() 返回 NodeList 中位于指定下标的节点。

js示例代码:


var a=document.getElementsByTagName(&#39;input&#39;)
console.log(a.item(2))
登录后复制

以上是javascript dom对象专属属性实例汇总的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板