DOM

1.DOM节点树

2.获得节点的方法

    getElementById();
    getElementsByTagName();
    getElementsByClassName();
    querySelectorAll();

3.修改

元素节点的内容
innerHTML
样式
obj.style.color="#333"

4.节点的类型判断(nodeType)

4.1   元素节点:1
4.2   属性节点:2
4.3   文本节点:3

5.创建节点

creatElement()//创建元素节点
creatTextNode()//创建文本节点
eg:
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #conbox{
            margin-left: auto;
            margin-right: auto;
            margin-top: 100px;
            background: pink;
        }
    </style>
</head>
<body>
<script>
    var bod = document.getElementsByTagName("body")[0];
    var box = document.createElement("div");
    box.setAttribute("id","conbox");
    var spans= document.createElement("span");
    var  txt = document.createTextNode("你好");
    spans.appendChild(txt);
    //    console.log(div_box.innerHTML);
    box.appendChild(spans);
    bod.appendChild(box);
</script>
</body>

6.增加节点

appendChild(node)将新元素作为父元素的最后一个子元素添加;
代码参考上节;

7.删除节点

<div id="con">
    <ul id="friuts">
        <li>apple</li>
        <li>pear</li>
        <li>banana</li>
    </ul>
</div>
<script>
    var ull = document.getElementById("friuts");
    var lii = document.getElementsByTagName("li");
    ull.removeChild(lii[1]);
</script>

8.替换节点

eg:
<div id="con">
    <ul id="friuts">
        <li>apple</li>
        <li>pear</li>
        <li>banana</li>
    </ul>
</div>
<script>
    var ull = document.getElementById("friuts");
    var lii = document.getElementsByTagName("li");
//    ull.removeChild(lii[1]);
    var newLi = document.createElement("li");
    var orange = document.createTextNode("orange");
    newLi.appendChild(orange);
//    console.log(newLi);
    ull.replaceChild(newLi,lii[0]);
</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 文档片段(createDocumentFragment)

    天天_哥
  • Ajax(20171101)

    与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。 然而,在以下情况中,请使用 POST 请求: a)无法使用缓存文件(更新服务器上的文件或数...

    天天_哥
  • H5缓存

    天天_哥
  • BZOJ1060: [ZJOI2007]时态同步(树形dp 贪心)

    Description   小Q在电子工艺实习课上学习焊接电路板。一块电路板由若干个元件组成,我们不妨称之为节点,并将其用数 字1,2,3….进行标号。电路板的...

    attack
  • DOM扩展

    尽管DOM作为API已经非常完善了,但是为了实现更多的功能,仍然会有一些标准或专有的扩展。对DOM的两个主要扩展是Selectors API(选择符API)和H...

    奋飛
  • Swift入门: 字符串插值

    如果我们想打印一条消息给包含他们姓名的用户,字符串插值就变得很简单:只需编写一个反斜杠、一个左括号、一个代码、一个右括号,如下所示:

    韦弦zhy
  • JS 前20个常用字符串方法及使用方式

    charAt(x) charCodeAt(x) concat(v1,v2..) fromCharcode(c1,c2) indexOf(substr, ...

    Javanx
  • 两天研习Python基础(四) 获取用户输入

    [1]Python docs - 整数文本: https://docs.python.org/3/reference/lexical_analysis.html...

    王诗翔呀
  • 机器学习照进艺术史,这个AI可以鉴别名画

    今年三月,一伙艺术品大盗闯入意大利西北部的一座教堂,他们以为自己偷窃的是佛兰德斯画派大师小彼得·勃鲁盖尔(Pieter Brueghel the Younger...

    机器之心
  • 车联网、智慧物流将乘风而起?《交通强国建设纲要》全解读来了

    日前,中共中央、国务院印发《交通强国建设纲要》(以下简称“纲要”),纲要中明确了我国不同阶段的交通建设目标,同时也提到了大力发展智慧交通、智慧物流等内容,主要有...

    镁客网

扫码关注云+社区

领取腾讯云代金券