前端之dom操作

1.HTML DOM(文档对象类型)
Document Object Mode
2.HTML DOM 树

html dom树
3.取dom节点

  • document.getElementById(“id名”);
    根据Id选择dom,唯一

  • document.getElementsByClass(“class名”);
    根据class选择dom,不唯一

  • document.getElementsByTagName(“标签名”);
    根据tag选择dom,不唯一

  • document.getElementsByName(“name 属性名")
    根据name属性选择dom,不唯一
    注意:页面的body节点可以直接用document.body来取
    4.如何取

  • 父节点.childNodes;
    即取出所有子节点

  • 父节点.children[0];
    即取出第一个子节点

  • 子节点.parentNode;
    即取出父节点

  • 子节点.parentNode.children[1];
    即取出兄弟节点,先取父节点再取子节点
    补充:通过父节点来创建子节点

  • 父节点.insertBefore(子节点1,子节点2);
    子节点1:需要创建的新子节点
    子节点2:选择一个子节点,新创建的子节点1将会放到该节点之前,如果没有就用null

  • 父节点.appendChild(子节点);
    在父节点末尾追加一个新的子节点
    var divEle = document.createElement(“div”);
    /先创建一个元素赋给divEle/
    document.body.insertBefore(divEle,container);
    /然后在body里面插入,并且插入的元素放在container节点之前,并且选择的元素具有唯一性,不能有多个/
    5.删除dom节点
    通过父节点来删除子节点
    父节点.removeChild(子节点);
    6.修改dom节点
    container.innerText = “这是被插入的文本内容,这是一个链接”;
    testDiv[0].innerHTML = “这是被插入的html内容,这是一个链接”;
    运行结果:
    在结果图
    注意:不要使用在文档加载之后使用 document.write()
    innerText和innerHTML重复插入原来内容均会被覆盖

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值