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. 自适应 Simpson 积分法学习笔记

    自适应 Simpson 积分法,是一种计算一段区间内,形态奇怪的函数和的算法,例如面积并和难以直接用通项公式计算的函数. Simpson 积分 我们都知道,求解微积分需要求解一个导数的原函数,但这显然 ...

  2. 使用idea合并 dev分支合并到test分支

    这里展示将dev分支合并到test分支首先切换到test分支 按下图所示操作

  3. zabbix - [03] 安装部署

    参考:https://www.yuque.com/fenghuo-tbnd9/ffmkvs zabbix6要求操作系统为Centos8,所以一开始安装部署的时候发现少了zabbix-server-my ...

  4. JUC相关知识点总结

    Java JUC(java.util.concurrent)是Java并发编程的核心工具包,提供了丰富的并发工具类和框架.以下是JUC的主要知识点,按难易程度分类,供你参考: 1. 基础概念与工具类 ...

  5. Vulnhub-Troll-1靶机-ftp匿名登录+流量包分析+hydra爆破+ssh登录脚本提权

    一.靶机搭建 选择扫描虚拟机 选择路径即可 二.信息收集 扫ip 靶机ip:192.168.108.144 扫开放端口 开放了ftp服务 扫版本服务信息 信息如下 21/tcp open ftp vs ...

  6. mysql导出指定数据或部份数据的方法

    https://www.jb51.net/article/47525.htm 1.新建一个表,比如new-table,包含所要导出的字段的名称,比如a,b,c2.使用insert into new-t ...

  7. NumPy学习11

    今天学习了NumPy线性代数 21, NumPy线性代数 numpy_test11.py : import numpy as np ''' 21, NumPy线性代数 NumPy 提供了 numpy. ...

  8. C# 中比较实用的关键字，基础高频面试题！

    前言 在C#编程中关键字是构建逻辑和实现功能的基石,它承载着编程语言的语法规则和编程智慧.熟练掌握这些基础高频关键字对提升编程能力和面试表现至关重要,它们是日常开发和解决复杂问题的关键. DotNet ...

  9. kubernetes 容器编排系统

    前言 docker解决了打包和隔离的问题,但是在docker集群中我们需要解决更多的问题,如调度(容器在哪运行).生命周期及健康状况(确保容器在无错的情况下运行).服务发现(容器所处位置,和容器通信) ...

  10. 用Docker Swarm实现容器服务高可用

    背景与技术选择 根据我之前的几篇「Django 系列」文章,后端架构中我使用了 Django + Celery + RabbitMQ 三个框架/服务.现在有几个问题: 如何用容器快速部署这三个应用? ...