dom操作补充

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>

        

    </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操作补充的更多相关文章

HTML JavaScript的DOM操作
1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作一.属性和方法: 属性(值或者子对象): op ...
HTML--7JavaScript的DOM操作
1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作一.属性和方法: 属性(值或者子对象): op ...
课堂所讲整理：HTML--7JavaScript的DOM操作
1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作一.属性和方法: 属性(值或者子对象): op ...
JavaScript的DOM操作（2）
补充: 回车符\r和换行符\n的区别:\r 相当于enter,是段落与段落之间的区别, \n 相当于shift+enter,是行与行之间距离,比较小几种window操作方法: 1.获取当前窗口大 ...
jQuery2.x源码解析(DOM操作篇)
jQuery2.x源码解析(构建篇) jQuery2.x源码解析(设计篇) jQuery2.x源码解析(回调篇) jQuery2.x源码解析(缓存篇) jQuery这个类库最为核心重要的功能就是DOM ...
JS中的函数、BOM和DOM操作
一.JS中的函数 [关于注释] /** [文档注释]:开头两个*.写在函数上方,在调用函数时可以看到文档上方的描述信息. */ // 单行注释 /* 多行注释 */ 1.函数的声明及调用 (1) ...
前端性能优化--为什么DOM操作慢？浅谈DOM的操作以及性能优化问题-重绘重排为什么要减少DOM操作为什么要减少操作DOM
前端性能优化--为什么DOM操作慢? 作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...
3.25课·········JavaScript的DOM操作
1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作一.属性和方法: 属性(值或者子对象): op ...
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 ...
BOM与DOM之DOM操作
目录一:DOM操作 1.DOM介绍 2.DOM标准规定HTML文档中的每个成分都是一个节点(node): 3.DOM操作需要用关键字二:查找标签 1.id查找类查找标签查找(直接查找) 2.i ...

随机推荐

AI工具推荐：领先的开源 AI 代码助手——Continue
前言之前介绍了VS Code中的AI插件Cline与Roo Code,这两个都是根据给定一个任务,开始自动写代码的.除了这两个AI代码工具之外,在平常我还很喜欢的就是Continue . Conti ...
Flume - [01] 概述
一.什么是Flume Flume 是Cloudera提供的一个高可用,高可靠的,分布式的海量日志采集.聚合和传输的系统. Flume最主要的作用就是:实时读取服务器本地磁盘的数据,将数据写入HDFS. ...
C++最基本调用动态链接库dll方法的小结
针对当时初学动态链接.静态链接,有些文档整理一下发出来算是给自己和读者一个小结. 首先创建DLL 编辑头文件 dllmain.h 头文件: #pragma once #if defined(_DLL_ ...
【BUUCTF】AreUSerialz
[BUUCTF]AreUSerialz (反序列化) 题目来源收录于:BUUCTF 网鼎杯 2020 青龙组题目描述根据PHP代码进行反序列化 <?php include("fl ...
Scala Set集合元素唯一，无序
package com.wyh.day01 /** * Set集合 * 唯一,无序 * * Set中大部分方法与List一致,但是不可以进行排序 */ object ScalaSet { def ma ...
[rustGUI][iced]基于rust的GUI库iced（0.13）的部件学习（06）：基于iced实现一个简单的图片浏览器
前言本文是关于iced库的部件介绍,iced库是基于rust的GUI库,作者自述是受Elm启发. iced目前的版本是0.13.1,相较于此前的0.12版本,有较大改动. 本合集是基于新版本的关于分 ...
openssl基础使用（密码学 linux）
目录实验原理实验过程一.对称加密 1.使用rc4加解密 2.使用AES加解密 ...
Apollo批量给新创建的用户授可编辑权限
背景: 我们要在Apollo中批量给新创建的用户授可编辑权限 apollo系统版本: java-2.1.0 管理员账号:Apollo 可编辑账号:guoyabin 过程: 在没写这段代码的时候从网上搜 ...
【安卓】使用Handler出现的警告
使用Handler出现的警告零.原由安卓中使用Hander时出现了如下警告: This Handler class should be static or leaks might occur (a ...
比cat更好用的命令！
大家好,我是良许. 作为程序员,大家一定对 cat 这个命令不陌生.它主要的功能就是用来显示文本文件的具体内容. 但 cat 命令两个很重大的缺陷:1. 不能语法高亮输出:2. 文本太长的话无法翻页输 ...

dom操作补充

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

随机推荐

热门专题