DOM-（Document Object Model）即文档对象模型。

JavaScript可以动态地修改DOM，从而来修改HTML的内容。

查找HTML元素

  • 通过 id 找到 HTML 元素

  • 通过标签名找到 HTML 元素

  • 通过类名找到 HTML 元素

设置样式总结：

  • className:用于为DOM元素直接添加一个样式类

  • style:用于为DOM元素添加某一个样式值，注意驼峰写法

  • styleText:用于为DOM元素一次添加多个样式

创建和增加节点:

  • createElement():创建节点

  • appendChild():末尾追加方式插入节点

  • insertBefore()在指定节点前插入新节点

  • cloneNode():克隆节点

相关练习代码：

动态添加内容

    <script type="text/javascript">

        window.onload = function() {

            var d = document.getElementById('d');

            //创建一个节点,里面是节点标签的名字

            //定义个变量，等于创建好的标签，然后在再向其中添加内容

            var a = document.createElement('a');

            a.href = '01.html';

            a.innerText = '添加的新内容';

            //添加元素到div里

            d.appendChild(a);

            //在指定节点前插入新的节点

            var p = document.createElement('p');

            //添加文本内容

            p.innerText = "这是被添加的内容";

//            d.appendChild(p);

            //参数1：要添加的元素，参数2：指定节点

            d.insertBefore(p,a);

            //克隆节点

            var span = document.getElementById(s);

            //克隆元素

            //cloneNode()有个参数，默认是false，修改为true，可以将原来的标签也克隆出来

            var spanc = span.cloneNode(true);

            d.appendChild(spanc);

        }

    </script>

<body>

<div id="d">

</div>

<span id="s">

    span标签内的内容

</span>

</body>

根据层次关系查找节点

<script>

    window.onload = function() {

        //通过id找到所需要的td

        var t1 = document.getElementById('t1');

        //获取父节点元素

        var tr = t1.parentNode;

        tr.style.backgroundColor = 'red';

        //获取子节点元素

        var tt3 = document.getElementById('tt3');

        tr.lastElementChild;

        tt3.innerText = 'blue';

        //前一个元素节点

        var t4 = t3.previousElementSibling;

        t4.innerText = "000000";

        //后一个元素节点

        var t5 = t4.nextElementSibling;

        t5.innerText = "XXXXXX";

    }

</script>

<body>

<table>

    <tr>

        <td id = "t1">1</td>

        <td id = "t2">2</td>

        <td id = "t3">3</td>

    </tr>

    <tr>

        <td id = "tt1">1</td>

        <td id = "tt2">2</td>

        <td id = "tt3">3</td>

    </tr>

</table>

</body>

设置样式

    <script type="text/javascript">

        window.onload=function(){

            /*            文档就绪函数*/

             var d = document.getElementById('d');

            //添加文本信息

/*            d.innerText = "添加文本信息";

            d.innerHTML = "可以直接添加文本信息，还可以添加标签";*/

            var abc = document.getElementsByName('abc');

            /*错误，ByName返回的是个数组，要通过数组来选取*/abc.href = "";

            /*ByName 通过数组下标得到对应元素*/

            abc[0].innerText = "修改原先的内容,改变文本信息";

            /*传递标签名字，给标签添加内容，该标签无ID，也无class属性*/

            var span = document.getElementsByTagName('span');

            span[0].innerText("添加的文本信息");

            /*通过className找对应元素*/

            var c =document.getElementsByClassName('c');

            for(var i = 0; i < c.length; i++){

                c[i].innerText = "把它原先的内容去改变";

            }

            /*属性是成对出现，属性名+属性方法*/

            document.getElementById("food").className = "fruit";

            document.getElementById("food").style.color = "red";

            document.getElementById("food").style.size = "20px";

        }

    </script>

<body>

<div id="d">

</div>

<a href="" name="abc">属性名字abc</a>

<span>

</span>

</body>

JavaScript——DOM操作的更多相关文章

  1. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  2. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

  3. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  4. javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的.   DOM添加元素,使用节点属性  <!DOCTYPE html PUBLIC ...

  5. javascript DOM操作HTML文档

    文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...

  6. 仅100行的JavaScript DOM操作类库

    如果你构建过Web引用程序,你可能处理过很多DOM操作.访问和操作DOM元素几乎是每一个Web应用程序的通用需求.我们我们经常从不同的控件收集信息,我们需要设置value值,修改div或span标签的 ...

  7. SVG基础以及使用Javascript DOM操作SVG

    SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率 不支持事 ...

  8. Javascript DOM操作实例

          最近在学DOM,但是还是没有办法很好的记住API,想找些例子来练习,网上的例子将一个个DOM对象方法挨个举例,并没有集合在一起用,效果不尽人意.所以自己写一份实例,顺便巩固下学到的知识. ...

  9. javascript DOM操作 第19节

    <html> <head> <title>DOM对象</title> <script type="text/javascript&quo ...

  10. 常见的原生javascript DOM操作

    1.创建元素 创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...

随机推荐

  1. Redis中的常用命令哪些？

    a.hset 存储一个哈希键值对的集合 b.hget获取一个哈希键的值c.hdel 删除一个或多个字段 d.hgetall 获取一个哈希是键值对的集合 e.lpush key value向链表左侧添加 ...

  2. 30天自制OS（linux环境）-day1

    30天自制OS(linux环境)--第一天 我是在CentOS的环境上面实现的,使用ubuntu的环境也是类似的 第一步:因为要对二进制文件进行编辑,所以安装二进制编辑器hexedit(当然其他的也可 ...

  3. 一文搞懂Java引用拷贝、深拷贝、浅拷贝

    刷题.面试中,我们可能会遇到将一个对象的属性赋值到另一个对象的情况,这种情况就叫做拷贝.拷贝与Java内存结构息息相关,搞懂Java深浅拷贝是很必要的! 在对象的拷贝中,很多初学者可能搞不清到底是拷贝 ...

  4. Logstash学习之路（一）Logstash的安装

    一.Logstash简介 Logstash 是一个实时数据收集引擎,可收集各类型数据并对其进行分析,过滤和归纳.按照自己条件分析过滤出符合数据导入到可视化界面.它可以实现多样化的数据源数据全量或增量传 ...

  5. Spring Security OAuth2.0认证授权二：搭建资源服务

    在上一篇文章[Spring Security OAuth2.0认证授权一:框架搭建和认证测试](https://www.cnblogs.com/kuangdaoyizhimei/p/14250374. ...

  6. C#扫盲篇（三）:Action和Func委托--实话实说

    一.基础定义 老王想找老张的老婆出去耍,但是一看,老张还在厨房煮饭.于是老王就对老张隔壁的淑芬说:"等下老张吃完饭出去喝茶,你就把前门晒的苞谷收了,老张从左门出,你就收右边的苞谷,我就知道从 ...

  7. NOIP初赛篇——07信息编码表示

    一.基本概念 编码 ​ 计算机要处理的数据除了数值数据以外,还有各类符号.图形.图像和声音等非数值数据.而计算机只能识别两个数字0,1.要使计算机能处理这些信息,首先必须要将各类信息转换成0与1表示的 ...

  8. LinkedList 的 API 与数据结构

    LinkedList 是 List 接口和 Deque 接口的双向链表实现,它所有的 API 调用都是基于对双向链表的操作.本文将介绍 LinkedList 的数据结构和分析 API 中的算法. 数据 ...

  9. js 判断用户是手机端还是电脑端访问

    通过userAgent 判断,网页可以直接使用 navigation对象 node端 可以通过请求头的 ctx.request.header['user-agent'] const browser = ...

  10. SpringBoot 导入插件报错 Cannot resolve plugin org.springframework.boot:spring-boot-maven-plugin:2.4.1

    使用 maven 导入插件的时候报错: Cannot resolve plugin org.springframework.boot:spring-boot-maven-plugin:2.4.1 我的 ...