《丁小柒的JavaScript大神之路》----Dom(1)

从这一节开始,我会花1-3天的时间来带大家学习一下DOM
那么什么是DOM呢。DOM就是文档对象模型,说的通俗一点就是你当前所在写的页面,至少这是我的理解,在看dom的内容之前,请确认一下你是否会使用HTML CSS来编写页面,如果不会的话,请去隔壁W3C或者菜鸟教程去学习一下HTML CSS或者HTML5 CSS3
然后你需要了解如下几点:

文档(Document):就是指HTML或者XML文件

节点(Node):HTML文档中的所有内容都可以称之为节点,常见的节点有

元素节点 属性节点 文本节点 注释节点

元素(Element):HTML文档中的标签可以称为元素

我们如果需要获取一个节点的时候,我们会

document.getElementById("id");  // 通过元素的ID获取节点
document.getElementByName("name属性");  通过元素的name属性获取节点
document.getElementByTagName("元素标签");  //通过元素标签获取节点
// 高级浏览器还支持的方法
document.getEmelentByClassName("类名");  通过元素的类名获取节点

如果我们需要给某个节点添加属性或者绑定事件

var ele =document.getElementById("id");    //获取到ID为id的节点
ele.href=“”          //添加链接(图片什么的原理相同)
ele.onclick=function (){}           //点击触发匿名事件

获取与设置节点的属性
getAttribute:(获取)

<!DOCTYPE html>
<html>

    <head>
        <style type="text/css">

        </style>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <a href="#" onclick="a()">a</a>
<script type="text/javascript">
    function a(){
        var a=document.getElementsByTagName("a")[0];  
        //只能通过getElementByIagName()的方式来获取到当前的节点
        console.log(a.getAttribute("href"))
        //通过a的getAtrribute()函数来获取节点的href属性
    }
</script>
    </body>
</html>

setAtrribute:(设置)

a.setAttribute('title','node')  //给a节点添加title的属性,值为node

也许有人会问,我获取的时候为什么后面有[0],直接那多好,那是因为通过TagName获取到的是整个页面的这个tagname的节点,是一个数组,我们需要通过索引来拿到所需要的节点.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值