<!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 > 请选择功法：<br/> <input type="radio" value="jysg">九阳神功<br/> <input type="radio" value="qkdny">乾坤大挪移<br/> <input type="radio" value="khbd">葵花宝典<br/> <input type="radio" value="xxdf">吸星大法<br/> </form> <p>少侠请三思！！！</p> <script> //js演示代码请添加至此 </script> </body> </html>
(以下所有js演示代码都是以本文档中的 示例html代码 为实验对象)
1 element.appendChild(nodeName) 向元素添加新的子节点，作为最后一个子节点，并返回该子节点。如需向 HTML DOM 添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。
js演示代码：
var a=document.getElementById('first_form'); var textnode=document.createTextNode("慎重选择"); a.appendChild(textnode)
2 element.getAttribute(para) 返回元素节点的指定属性值。
js演示代码：
var a=document.getElementById('first_form'); console.log(a.getAttribute('name')) //控制台输出name的值
3 element.getAttributeNode(para) 返回指定的属性节点。
js演示代码：
var a=document.getElementById('first_form'); console.log(a.getAttributeNode('name')) //控制台输出name属性节点
4 element.getElementsByTagName(para) 返回拥有指定标签名的所有子元素的集合。
js演示代码：
var a=document.getElementById('first_form'); console.log(a.getElementsByTagName('input')) //控制台输出
5 element.hasAttribute(para) 如果元素拥有指定属性，则返回true，否则返回 false。
js演示代码：
var a=document.getElementById('first_form'); console.log(a.hasAttribute('name')) //控制台输出
6 element.insertBefore(insertNode,appointedNode) 在指定的已有的子节点之前插入新节点。
js演示代码：
var a=document.getElementById('first_form'); var inputList=document.getElementsByTagName('input'); var newNode=document.createElement('input'); var newNode2=document.createTextNode('天马流星拳'); var br=document.createElement('br'); newNode.type='radio'; newNode.name='gongfa'; newNode.value='tmlxq'; a.insertBefore(newNode,inputList[2]); a.insertBefore(newNode2,inputList[3]); a.insertBefore(br,inputList[3]);
7 element.removeAttribute() 从元素中移除指定属性。
js示例代码：
var a=document.getElementById('first_form'); a.removeAttribute('name'); console.log(a.hasAttribute('name'))
8 element.removeChild() 从元素中移除子节点。移除的节点虽然不在文档树中了，但其实还在内存中，可以随时被引用。
js示例代码：
var a=document.getElementById('first_form'); a.removeChild(a.childNodes[3]);
9 element.replaceChild(newNode,replaceNode) 把指定节点替换为新节点。
10 element.setAttribute(attrName,attrValue) 把指定属性设置或更改为指定值。
js示例代码：
var a=document.getElementById('first_form'); a.setAttribute('name','shaolinsi'); console.log(a.name)
11 element.setAttributeNode() 修改指定属性节点
js示例代码：
var a=document.getElementById('first_form'); var attr = document.createAttribute('id'); attr.value='the_first'; a.setAttributeNode(attr); console.log(a.id)
12 nodelist.item() 返回 NodeList 中位于指定下标的节点。
js示例代码：
var a=document.getElementsByTagName('input') console.log(a.item(2))
以上就是小编为大家带来的js基础之DOM中元素对象的属性方法详解全部内容了，希望大家多多支持脚本之家~
您可能感兴趣的文章: