JavaScript-document对象常用方法

JavaScript-document对象常用方法

通过dom对象实现全选、反选、全不选 getElementsByName方法
// 全选
function AllFun(params) {
    var tag = document.getElementsByName("hobby");
    for (var i = 0; i < tag.length; i++) {
        tag[i].checked = true;
    }

}
// 全不选
function NoneFun(params) {
    var tag = document.getElementsByName("hobby");
    for (var i = 0; i < tag.length; i++) {
        tag[i].checked = false;
    }

}
// 反选
function ReverseFun(params) {
    var tag = document.getElementsByName("hobby");
    for (var i = 0; i < tag.length; i++) {
        tag[i].checked = !tag[i].checked;
        // if (tag[i].checked) {
        //     tag[i].checked = false;
        // } else {
        //     tag[i].checked = true;
        // }
    }

}
兴趣爱好:
<input type="checkbox" name="hobby" value="Java">Java
<input type="checkbox" name="hobby" value="python">Python
<input type="checkbox" name="hobby" value="JavaScript">JavaScript
<button onclick="AllFun();">全选</button>
<button onclick="ReverseFun();">反选</button>
<button onclick="NoneFun();">全不选</button>
getElementsByTagName方法
function AllFun(params) {
    var tag = document.getElementsByTagName("input");
    for (var i = 0; i < tag.length; i++) {
        tag[i].checked = true;
    }
}
兴趣爱好:
<input type="checkbox" value="Java">Java
<input type="checkbox" value="Python">Python
<input type="checkbox" value="JavaScript">JavaScript
<button onclick="AllFun();">全选</button>
注意:
  1. 页面加载完成之后查询
  2. 如果有id属性,优先使用getElementById方法查询
  3. 如果没有id属性,优先使用GetElementByName方法查询
  4. 如果id属性和name属性没有,最后使用getElementByTagName方法查询
方法:
  1. getElementsByTagName:获取当前节点的指定标签名孩子节点
  2. appendChild(childnode):添加一个子节点,childnode是要添加的孩子节点
属性:
  1. childNodes:获取当前节点的所有子节点
  2. firstChild:获取当前节点的第一个子节点
  3. lastChild:获取当前节点的最后一个子节点
  4. parentNode:获取当前节点的父节点
  5. nextSibling:获取当前节点的下一个节点
  6. previousSibling:获取当前节点的上一个节点
  7. className:获取或设置标签的class属性值
  8. innerHTML:表示获取/设置起始标签和结束标签中的内容
  9. innerText:表示获取/设置起始标签和结束标签中的文本
分享到 :

发表评论

登录... 后才能评论