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 条评论
登录 后参与评论

相关文章

来自专栏向治洪

android之View绘制

Android系统的视图结构的设计也采用了组合模式,即View作为所有图形的基类,Viewgroup对View继承扩展为视图容器类,由此就得到了视图部分的基本...

1609
来自专栏深度学习之tensorflow实战篇

go println与printf区别

Println 与Printf 都是fmt 包中的公共方法 Println :可以打印出字符串,和变量; Printf : 只可以打印出格式化的字符串,可以输出...

2754
来自专栏HTML5学堂

CSS 1.0~3.0选择器(中)

HTML5学堂:上一篇 讲到CSS1.0~CSS3.0选择器的兼容问题等,CSS选择器的使用是特别广泛的,大家也会经常用到,而用到的选择器有哪些?接下来本文会介...

2973
来自专栏闻道于事

JavaWeb(八)JQuery

jQuery 市场用得比较多两个框架: jQuery 比较适合做一些互联网 的应用(12306.com,蘑菇街,美丽说,聚美) extjs 比较适合做后台管理系...

2804
来自专栏博客园

JQ 选择器大全

$(".one+div") <==> $(".one").next("div");

1322
来自专栏河湾欢儿的专栏

event事件对象

event: 事件对象,当一个事件发生的时候,和当前这个对象发生的这个事件有关的一些详细信息都会被临时保存到一个指定的地方-event对象,供我们在需要的时候调...

842
来自专栏james大数据架构

Jquery基本用法总结

选择器 $("#mydiv") 通过ID $("p#myp") 选择id=myp 的所有p元素(组合型) $(".mydiv") 通过 class="mydi...

1949
来自专栏smy

css控制标题长度超出部分显示省略号

width: 50px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; 设置或...

34012
来自专栏xingoo, 一个梦想做发明家的程序员

【web必知必会】—— 使用DOM完成属性填充

  本文介绍了使用DOM的简单方法实现动态加载图片的功能。 前文介绍了: 1 DOM四个常用的方法   首先看一下效果,初始时是一个相册,可以点击...

1819
来自专栏静默虚空的博客

jQuery DOM操作

对节点的操作 查找节点 查找节点可以直接利用jQuery选择器来完成,非常便利。 插入节点 jQuery提供了8种插入节点的方法。 序号 方法 ...

2266

扫码关注云+社区