s5.html

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <title>Title</title>


</head>


<body>


    <div id="i1">


        你好


        <a>百<span>度</span></a>


    </div>


    <input type="text" id="i2"/>


    <select id="i3">


        <option value="11">北京</option>


        <option value="12">上海</option>


        <option value="13">广州</option>


    </select>


    <textarea id="i4"></textarea>


</body>


</html>








obj=document.getElementById('i1')


obj.innerText 只获取标签的文本





obj.innerHTML 获取标签里面的所有的，包括子标签





obj=document.getElementById('i1');


obj.innerHTML="<a href='http://www.qq.com'>腾讯</a>";





value 获取input标签中的值


obj=document.getElementById('i2');


obj.value="hyhskdk"





select:获取修改选中的value值


obj=document.getElementById('i3');


obj.value


obj.value=12





obj.selectedIndex=0  修改成第几个选项








textarea:多行文本操作


obj=document.getElementById('i4');


obj.value


obj.value=1233

s6.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div style="width: 600px;margin: 0 auto;">

        <input  id="i1" onfocus="Focus();" onblur="Blur();"  type="text" value="请输入关键字">

        <input type="text" placeholder="请输入关键字">

    </div>

    <script>

        function Focus() {

            var tag=document.getElementById('i1');

            var val= tag.value;

            if(val=="请输入关键字"){

                tag.value="";

            }

        }

        function Blur() {

            var tag=document.getElementById('i1');

            var val= tag.value;

            if(val.length==0){

                tag.value="请输入关键字";

            }

        }

    </script>

</body>

</html>



对样式进行操作

obj=document.getElementById('i1');

obj.className="c1 c2"; 添加样式

obj.className 查询样式

obj.classList 查询样式并以列表的形式显示

obj.classList.add('c3') 添加样式

obj.classList.remove("c2") 移除样式



<div class="c1 c2" style="font-size: 16px";></div>

obj.style.fontSize='16px'; //更细致的某一个样式操作

obj.style.backgroundColor='red';

obj.style.color='green';



对属性进行操作

obj=document.getElementById("i1");

obj.setAttribute("name","alex");  添加属性

obj.removeAttribute("value"); 删除属性

obj.attributes  获取所有的属性

创建标签并添加到html中

s8.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input type="button" onclick="AddEle1();" value="+">

    <input type="button" onclick="AddEle2();" value="+">

    <div id="i1">

        <p><input type="text"></p>

        <!--<hr/> 分隔线标签-->

    </div>

    <script>

        function AddEle1() {

            //创建一个标签

            //将标签添加到i1里面

            var tag="<p><input type='text'/></p>";

            document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);

        }

        function AddEle2() {

            //创建一个标签

            //将标签添加到i1里面

            var tag=document.createElement('input'); //创建一个input标签

            tag.setAttribute('type','text')

            tag.style.fontSize="16px";

            tag.style.color='red';



            var p=document.createElement('p'); //创建p标签

            p.appendChild(tag)

            document.getElementById('i1').appendChild(p) //添加p标签



        }

    </script>

</body>

</html>



创建标签的两种形式:

AddEle1:字符串的形式



AddEle2:对象的方式

document.createElement('div')  创建div标签

dom操作补充的更多相关文章

  1. HTML JavaScript的DOM操作

    1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...

  2. HTML--7JavaScript的DOM操作

    1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...

  3. 课堂所讲整理：HTML--7JavaScript的DOM操作

    1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...

  4. JavaScript的DOM操作（2）

    补充:   回车符\r和换行符\n的区别:\r 相当于enter,是段落与段落之间的区别, \n 相当于shift+enter,是行与行之间距离,比较小 几种window操作方法: 1.获取当前窗口大 ...

  5. jQuery2.x源码解析(DOM操作篇)

    jQuery2.x源码解析(构建篇) jQuery2.x源码解析(设计篇) jQuery2.x源码解析(回调篇) jQuery2.x源码解析(缓存篇) jQuery这个类库最为核心重要的功能就是DOM ...

  6. JS中的函数、BOM和DOM操作

     一.JS中的函数 [关于注释] /** [文档注释]:开头两个*.写在函数上方,在调用函数时可以看到文档上方的描述信息. */   // 单行注释 /* 多行注释 */ 1.函数的声明及调用 (1) ...

  7. 前端性能优化--为什么DOM操作慢？ 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM

    前端性能优化--为什么DOM操作慢?   作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...

  8. 3.25课·········JavaScript的DOM操作

    1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): op ...

  9. day45:JS中的json&JS的BOM操作和DOM操作

    目录 1.补充:CSS中的弹性盒子 2.JS中json的序列化 3.JS中的BOM操作 3.1 location操作 3.2 计时器 4.JS中的DOM操作 4.1 创建标签 4.2 查找标签 4.3 ...

  10. BOM与DOM之DOM操作

    目录 一:DOM操作 1.DOM介绍 2.DOM标准规定HTML文档中的每个成分都是一个节点(node): 3.DOM操作需要用关键字 二:查找标签 1.id查找 类查找 标签查找(直接查找) 2.i ...

随机推荐

  1. C# Windows Service 安装与卸载

    安装与卸载的使用工具 C:\Windows\Microsoft.NET\Framework64\v4.0.30319\InstallUtil.exe (一般安装了.NetFramework 后就会有该 ...

  2. Linux用户登录失败锁定策略

    1.账户锁定策略介绍 在Linux系统中,为了提高系统安全性,防止暴力破解攻击,我们可以通过配置PAM(Pluggable Authentication Modules)模块来限制登录失败次数并锁定用 ...

  3. Manjora配置记录

    22/9/12 目前的启动项有3:Windows Boot Manager.Manjaro.UEFI OS.其中UEFI OS 和 Manjaro 进入后内容相同:Windows下检测不到Manjar ...

  4. Redis会遇到的15个坑

    前言 如果你在使用 Redis 时,也遇到过以下这些「诡异」的场景,那很大概率是踩到「坑」了. 究竟是什么原因,导致的这些问题呢? 我把这些问题划分成了三大部分: 常见命令有哪些坑? 数据持久化有哪些 ...

  5. ubuntu网络连接失败

    首先要保证pc上可以连接上网络,然后进行下面的操作: 1.首先选择VMware的编辑选项 2.选择虚拟网络编辑器 3.还原默认设置,等待几分钟,确定就可以解决了

  6. JDK 24 发布，新特性解读！

    真快啊!Java 24 这两天已经正式发布啦!这是自 Java 21 以来的第三个非长期支持版本,和 Java 22.Java 23一样. 下一个长期支持版是 Java 25,预计今年 9 月份发布. ...

  7. Netty源码—9.性能优化和设计模式

    大纲 1.Netty的两大性能优化工具 2.FastThreadLocal的实现之构造方法 3.FastThreadLocal的实现之get()方法 4.FastThreadLocal的实现之set( ...

  8. swich语句

    1.switch语句格式 括号内的是待匹配内容,然后case后的是被匹配内容,如果括号内的内容与case后的内容一致,则会打印语句体 . 2.实操(后面的省略了) 3.注意事项 1.case后面的值不 ...

  9. 【SpringCloud】Hystrix熔断器

    Hystrix熔断器 概述 分布式系统面临的问题 分布式系统面临的问题 复杂分布式体系结构中的应用程序有数10个依赖关系,每个依赖关系在某些时候将不可避免地失败 服务雪崩 多个微服务之间调用的时候,假 ...

  10. ZKmall模版商城前后端分离秒级响应架构深度解析

    在当今的电商领域,用户体验和响应速度已成为决定平台竞争力的关键因素.ZKmall模版商城,作为一款高性能的电商平台解决方案,通过采用前后端分离架构,实现了秒级响应,为用户带来了极致的购物体验.本文将深 ...