JavaScript-document对象常用方法

鳄鱼君

发表文章数:643

热门标签

,

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » 经验教程 » 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:表示获取/设置起始标签和结束标签中的文本

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《JavaScript-document对象常用方法》 发布于2020-08-11

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

9 + 1 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册