JavaScript的组成部分之操作对象与表单_I'm sure ok!的博客-程序员宅基地

技术标签: JavaScript  

1.JavaScript的组成部分

javascript组成一个完整的 JavaScript 实现是由以下 3 个不同部分组成的:核心(ECMAScript)、文档对象模型(Document Object Model,简称DOM)、浏览器对象模型(Browser Object Model,简称BOM)。

2.操作BOM对象

1).Window

对象表示浏览器中打开的窗口

window.innerWidth;
666
window.innerHeight
150
window.outerHeight;
824
window.outerWidth;
1536

2).Navigato(导航)

封装了浏览器的信息

navigator.appName;
"Netscape"
navigator.appVersion;
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36"
navigator.userAgent;
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36"
navigator.__proto__
Navigator {
    }
navigator.platform
"Win32"

3).screen

代表电脑 屏幕尺寸

screen.width
1536
screen.height
864

4).location

代表当前页面的URL信息

host:"www.baidu.com"
href:"https://www.baidu.com/"
protocol:"https:"
reload:ƒ reload() // 刷新网页
// 设置新的地址
location.assign('https://blog.kuangstudy.com/')

5).document

代表当前的页面,HTML DOM文档树

document.title;
"写文章-程序员宅基地"
document.title = '博客'
"博客"~

获取具体的文档树节点

dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>~

<script>
    var dl = document.getElementById('app');~
 </script>

在这里插入图片描述

6).history

代表浏览器的历史记录

history.back() //后退
history.forward() //前进

3.操作DOM对象

浏览器网页就是一个DOM树形结构
更新:更新DOM节点
遍历dom节点:得到Dom节点
删除:删除一个Dom节点
添加:添加一个新的节点

要操作一个DOM节点,就必须要先获得这个DOM节点

1).获得dom节点

<body>
<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    //对应 css 选择器
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');
    var father = document.getElementById('father');
    var children = father.children;//获取父节点下的所有子节点
    console.log(children);//HTMLCollection(3)
    father.firstElementChild//获得第一个子节点 <h1>标题一</h1>
    father.lastElementChild//获得最后一个子节点 <p class="p2">p2</p>
   <script>

2).更新节点

<body>
<div id="id1">
</div>
<script>
    let id1 = document.getElementById('id1');
    //操作文本
    id1.innerText = 'abc'
    id1.innerHTML = '<strong>123</strong>';
"<strong>123</strong>"
id1.innerHTML = '<em>123</em>';
"<em>123</em>"
//操作css
id1.style.color = 'yellow'; // 属性使用 字符串 包裹
id1.style.fontSize='20px'; // - 转 驼峰命名问题
id1.style.padding = '2em'
</script>
</body>

3).插入节点

<body>
<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
<script>
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    list.appendChild(js);// 追加到后面
</script>
</body>

追加前
在这里插入图片描述
追加后
在这里插入图片描述

//创建一个新的标签,实现插入
var newp = document.createElement('p');
newp.id = 'newP';
newp.innerText = 'hello';
//创建一个标签节点
var myscript = document.createElement('script');
myscript.setAttribute('type','text/javascript');
//可以创建一个style标签
let mystyle = document.createElement('style');//创建一个空style标签
mystyle.setAttribute('type','text/css');
mystyle.innerHTML = 'body{background-color:chartreuse}';设置标签内容
document.getElementsByTagName('head')[0].appendChild(mystyle)

在这里插入图片描述

4).删除节点

<body>
<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    //对应 css 选择器
    var h1 = document.getElementsByTagName('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementsByClassName('p2');
    var father = document.getElementById('father');

    father.removeChild(p1);
    //删除节点 是一个动态的过程
    //father.removeChild(father.children[0]);
    //father.removeChild(father.children[1]);
    //father.removeChild(father.children[2]);
</script>
</body>

4.操作表单

表单是什么 form DOM树
表单的目的:提交信息

获得要提交的信息

<form action="post">
    <div>
        <p>
            <span>用户名:</span> <input type="text" id="username">
        </p>

        <!--多选框的值,就是定义好的value -->
        <p>
            <span>性别:</span>
            <input type="radio" name="sex" value="man" id="boy"><input type="radio" name="sex" value="women" id="girl"></p>
    </div>
</form>

<script>
    var input_text = document.getElementById('username');
    var boy_radio = document.getElementById('boy');
    var girl_radio = document.getElementById('girl');

    // 得到输入框的值
    input_text.value
    // 修改输入框的值
    input_text.value = '123'


    // 对于单选框,多选框等等固定的值,boy_radio.value只能取到当前的值
    boy_radio.checked; //查看返回的结果,是否为true,如果为true,则被选中~
    girl_radio.checked = true; //赋值

</script>

<form action="post">
    <p>
        <span>用户名:</span> <input type="text" id="username">
    </p>

    <!--多选框的值,就是定义好的value -->
    <p>
        <span>性别:</span>
        <input type="radio" name="sex" value="man" id="boy"><input type="radio" name="sex" value="women" id="girl"></p>

</form>

提交表单。md5 加密密码,表单优化

<!--
表单绑定提交事件
onsubmit= 绑定一个提交检测的函数, truefalse
将这个结果返回给表单,使用 onsubmit 接收!
onsubmit="return aaa()"
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
    <p>
        <span>用户名:</span> <input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码:</span> <input type="password" id="input-password">
    </p>

    <input type="hidden" id="md5-password" name="password">

    <!--绑定事件 onclick 被点击-->
    <button type="submit">提交</button>
</form>


<script>
    function aaa() {
    
        alert(1);
        var uname = document.getElementById('username');
        var pwd = document.getElementById('input-password');
        var md5pwd = document.getElementById('md5-password');

        md5pwd.value = md5(pwd.value);
        // 可以校验判断表单内容,true就是通过提交,false,阻止提交
        return true;
    }
</script>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lirui1212/article/details/104239133

智能推荐

OpenStack 实现技术分解 (7) 通用库 — oslo_config_范桂飓的博客-程序员宅基地

目录目录前文列表扩展阅读osloconfigargparsecfgpyclass Optclass ConfigOptsCONF 对象的单例模式前文列表OpenStack 实现技术分解 (1) 开发环境 — Devstack 部署案例详解 OpenStack 实现技术分解 (2) 虚拟机初始化工具 — Cloud-Init & metadata & userdata OpenSt

Codeforces 888E Maximum Subsequence 折半搜索_SigmaQuadrant的博客-程序员宅基地

给出n≤35n\leq35n≤35个数和一个模数mmm,然后要求选出若干个数,使得它们的和模上mmm是最大的,经典问题。nnn的范围不大但不够直接搜索,把nnn个数分成两半暴搜,然后把两半的结果都保存到数组里面,然后排序去重。...

android 基础上拉刷新和下拉加载_朱玉松的博客-程序员宅基地

上拉刷新和下拉加载 本来说是基础,但是上一次使用还是1年前,最近写项目感觉又要重新写。项目还是比较紧哪种,所有写下这边,方便以后使用,也供别人快速写出。1.框架植入。对于这种有十分好用,成熟的框架就没必要自己造轮子了。1.1 build.gradlecompile ‘com.scwang.smartrefresh:SmartRefreshLayout:1.0.1’我这边随便用用就放这个了...

《C++ Primer》中的TextQuery例子_eriklee1945的博客-程序员宅基地

正在看《C++ Primer》(4th),第325页给出了一个TextQuery例子,很好地总结了STL容器的用法,但是书上没有给出连续完整的代码,我实验过后把程序记录下来,便于以后查找回忆。该程序的功能是查找输入文本文件中某个单词的出现次数及其行号。#ifndef TEXTQUERY_H_#define TEXTQUERY_H_#include#include /

BeanUtils如何优雅的拷贝List_bugpool的博客-程序员宅基地_beanutils list

前言BeanUtils.copyProperties();确实为我们做了很多事情,虽然不能完美完成深拷贝,但是对于po、vo、dto的拷贝已经足够用了。但是其还是有一些不够完美的地方不足:不能拷贝list,而拷贝list的情况又大量存在,因此会有许多重复代码 for (S source : sources) { T target = new T(); ...

leetcode 88 Merge Sorted Array_shiter的博客-程序员宅基地

Given two sorted integer arrays nums1 and nums2, merge nums2 intonums1 as one sorted array.Note:You may assume that nums1 has enough space (size that is greater or equal tom + n) to hold addit

随便推点

灰度共生矩阵及相关特征值的计算——opencv_qq_40909394的博客-程序员宅基地_灰度共生矩阵特征值

#include&amp;lt;iostream&amp;gt;#include&amp;lt;opencv2/highgui.hpp&amp;gt;#include&amp;lt;opencv2/core.hpp&amp;gt;#include&amp;lt;opencv2/imgcodecs.hpp&amp;gt;#include&amp;lt;opencv2/opencv.hpp&amp;gt;using namespace std;using namesp...

java.lang.ClassNotFoundException: com.mysql.jdbc.Driver解决办法__易安的博客-程序员宅基地

在确定代码无误以及成功导入驱动jar包的情况下,尝试右键项目,双击Properties,进入Deployment Assembly,选择add–&gt;Java Build Path Entries,选择jar包,ok。

python学习笔记 collections.OrderedDict‘ object has no attribute ‘eval‘_java_crocodile的博客-程序员宅基地

pytorch==1.6.0的框架下保存模型时,若想让模型在整个训练过程之后的预测过程中加载模型,不能使用torch.save(model.state_dict(),model_path)该语句只保存了模型的权重参数未保存整个模型,model.eval()时候会报错collections.OrderedDict' object has no attribute 'eval'正确语句应当为保存时torch.save(model,'save_path')加载时torch.load('

【面经】云从科技HR面经(Java开发)_xclia的博客-程序员宅基地

【面经】云从科技HR面经(Java开发)1、自我介绍2、说一下对我们公司的了解3、说一下最近做的一个项目4、项目里遇到什么问题,怎么解决的5、职业规划6、优缺点7、拿了什么offer,工资8、期望城市和薪资9、为什么说这个薪资...

React简书开发实战课程笔记——1_EvanOne(文一)的博客-程序员宅基地_react详细教程 简书

这是我在看了imooc中的React简书开发实战课程之后记下的笔记,在这做下备份,以便日后复习。1、dangerouslySetInnerHTML属性当React元素包含html标签时,如果不设置dangerouslySetInnerHTML属性,就会把html当做字符串处理:render() { const value = '&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;h1&amp;amp;amp;amp;amp;amp;amp;a

【清华大学】操作系统 陈渝——Part6 全局页面置换算法_kxwang_的博客-程序员宅基地

【清华大学】操作系统 陈渝——Part6 局部页面置换算法6.8 局部页面替换算法的问题,工作集模型局部页面替换算法的问题工作集模型6.8 局部页面替换算法的问题,工作集模型局部页面替换算法的问题上述算法都是针对一个程序进程而言的,但操作系统支持多个程序同时运行,如果每个程序采取固定的局部页面置换算法,会带来一些问题。如下:采取FIFO算法时,分配3个物理页帧会产生 9 此缺页中断,分配...

推荐文章

热门文章

相关标签