一：Javascript：弱类型脚本语言，是一种动态类型。实现部分动画效果和用户交互等

　　-- html是骨架（页面结构）  css样式  js是行为 --

弱类型体现：

JS代码可以写在body，head中。

　　如果需要写在body中，但有需要它最后执行 可以先加上window.onload=function(){ alert(1)}

  1. <head>
  2.     <script>
  3.          window.onload = function(){
  4.          alert(1)
  5.         }
  6.     </script>
  7. </head>
  8. <body>
  9.     <script>
  10.         alert(2);
  11.         console.log("haha");
  12.     </script>
  13. </body>

效果 先弹出 2 ，在打印 haha 到控制台 最后弹出 1

     

　　类似css的三种样式，行内，元素内，外链

1.行内

  1. <body>
  2.     <!--1.行内 单击时弹出窗口 显示 1-->
  3.     <div onclick="alert(1)"></div>
  4. </body>

效果

2.元素内

  1. <body>
  2.     <!--2.script标签内-->
  3.     <script>
  4.         alert(2);
  5.         console.log("打印在控制台");>
  6.     </script>
  7. </body>

效果：先弹窗 2 ，点击确定在                                                                                                打印到控制台console

  

3.外链

  1. <body>
  2.     <script src="new.js"></script>
  3. </body>

　　new.js

  1. alert("我先")
  2. console.log("haha")

效果 ： 先出现弹窗                    再                            打印log haha

  

 定义变量

  1. <body>
  2.    <script>
  3.         var a=1;        // number
  4.         var b=1.1;      // number
  5.         var c="haha";   // string
  6.         var x=10,y=11;  //同时设置多个值
  7.         alert(typeof(a));   // 弹出 a 的类型
  8.         alert(x+y)         // 弹出 x+y的值
  9.     </script>
  10. </body>

可以先定义变量名 不给值 占位 ，需要用它的值再赋值

  1.     </script>
  2.         var d,f;
  3.         d=1;
  4.         f=2;
  5.         alert(d*f);
  6.     </script>

 二：获取元素

　　1.获取独立的标签 document+标签=" 赋值的内容"

　　document.title=

　　document.body.innerHTML="将值赋给了整个body，body拥有的其他内容就没了"

　　document.body.innerHTML+="消除方法 += 。新增加内容"

innerHTML能够解析标签:                 将内容加粗 斜体

　　document.body.innerHTML+="<em><b>消除方法 += 。新增加内容</b></em>"

innerTEXT不能解析标签：                会将加粗斜体标签当作内容显示在浏览器上

document.body.innerHTML+="<em><b>消除方法 += 。新增加内容</b></em>"

  1. <body>
  2.     <script>
  3.         document.title="改变标题"  // 只有title 这样写
  4.         // document.body = "body网页上显示的内容"   // 报错，除title以外，body后面还得加上innerHTML
  5.         // document.body.innerHTML = "body网页上显示的内容"   // 将值赋给了整个body，body拥有的其他内容就没了
  6.         document.body.innerHTML += "body网页上显示的内容"   // 消除方法 += 。新增加内容
  7.     </script>
  8. </body>

　　2.通过id获取元素 document.getElementById

  1.     <style>
  2.         * {
  3.             margin: 0;
  4.             padding: 0;
  5.         }
  6.         div{
  7.             width: 100px;
  8.             height: 100px;
  9.             background: red;
  10.         }
  11.     </style>
  12.  
  13. </body>
  14.     <div id="box1" title="h">我是div</div>        /*这儿的title是 鼠标移到div上会显示的内容是h*/
  15.     <script>
  16.         document.getElementById("box1").innerText="通过id获取元素在改变的"
  17.     </script>
  18. </body>

效果  改之前                              之后

     

3.通过标签名获取Tagname， 多个p标签 需要加下标

document.getElementsByTagName("p")

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <p>1</p>
  15.     <p>2</p>
  16.     <p>3</p>
  17.     <p>4</p>
  18.     <script>
  19.         // 通过标签名获取 Tagname 多个p标签  需要加下标
  20.         // document.getElementsByTagName("p");
  21.         var oP=document.getElementsByTagName("p");
  22.         // 查看有几个元素
  23.         alert(oP.length);  // 弹出窗口显示4 代表有四个P
  24.         // 通过下标该值 改第一个P
  25.         oP[0].innerHTML+="第一个p";
  26.     </script>
  27. </body>
  28. </html>

效果

4.通过classname

  1.         // 通过classname
  2.         var oClassname=document.getElementsByClassName("box2");
  3.         alert(oClassname.length)
  4.         oClassname.innerHTML[0]="dff";
  5.     </script>

5.通过选择器

  1. <div class="box2">
        <p class="p1">1</p>
        <p class="p1">2</p>
        <p class="p1">3</p>
        <p>4</p>
    </div>

<1>.// querySelector只选中一个元素

  1. document.querySelector(".box2>.p1").innerHTML="<b>1</b>"  // 选择第一个p1

<2>.// querySelector选中多个元素 通过下标选择

  1. oCls=document.querySelectorAll(".box2 .p1");
    alert(oCls.length)            // 3  p1
    oCls[1].innerHTML="改了吗"    // 改下标为1的值  第二个p1

三：write方法  有两种情况

  1.     <div>
  2.         测试write
  3.     </div>
  4.     <script>
  5.         // 1.在文档流关闭之前写入
  6.         document.write("在文档流关闭之前写入")
  7.     </script>

效果：write之前                                           之后 新增内容

                  

2.在文档流关闭之后写入

  1.     <script>
  2.         // 2.在文档流关闭之后写入
  3.         window.onload=function () {
  4.             document.write("在文档流关闭之后写入")
  5.         }
  6.     </script>

效果  修改了整个html的内容，只剩下写入的内容了

  1.  
  1.  

Javascript，获取元素，write方法的更多相关文章

  1. javascript获取元素的方法[xyyit]

    1. javascript默认的方法: <div id=”div_id” class=”div_class” name=”div_name”></div> //1. 根据id ...

  2. JavaScript通过元素id和name直接获取元素的方法

    概览: 偶然的机会,我在JavaScript中直接用HTML元素的id属性来获取该元素,并设置该元素的其他属性值,竟然能够正确解析不报错!于是我去查阅相关资料,也有其他同行这么用. 虽然说这种用法不是 ...

  3. javascript 获取元素样式的方法

    javascript 获取元素样式常用方法. Javascript获取CSS属性值方法:getComputedStyle和currentStyle  1 .对于元素的内联CSS样式(<div s ...

  4. 详细解析 JavaScript 获取元素的坐标

    引言 最近突然看到了有关图片懒加载的问题,大致意思就是初始状态下页面只加载浏览器可视区域的图片,剩余图片在当浏览器可视区域滚动到其位置时才开始加载.貌似现在许多大型网站都有实现懒加载,所以我便就此问题 ...

  5. JQuery获取元素的方法总结

    JQuery获取元素的方法总结 一.说明   获取元素的方法分为两种:jQuery选择器.jQuery遍历函数. 做个总结,巩固下知识. 二.获取本身 1.只需要一种jQuery选择器   选择器 实 ...

  6. JavaScript获取元素样式

    原生的JavaScript获取写在标签内部的样式很简单: <div class="test" id="test" style="width:10 ...

  7. 【鬼脸原创】JQuery获取元素的方法总结

    目录 一.说明 二.获取本身 三.获取同级元素 四.获取父级元素 五.获取子级元素 一.说明   获取元素的方法分为两种:jQuery选择器.jQuery遍历函数. 做个总结,巩固下知识. 二.获取本 ...

  8. javascript获取时间戳的方法

    javascript获取时间戳的方法<pre> START = new Date().getTime();</pre>这个是毫秒 除以1000就是秒啦

  9. selenium获取元素信息方法(转载)

    1.获取当前页面的Url函数 方法:current_url 实例: driver.current_url 2.获取元素坐标 方法:location 解释:首先查找到你要获取元素的,然后调用locati ...

  10. JavaScript中的获取元素的方法

    通过id获取元素 document.getElementById(id名字) 通过标签获取元素 document/元素.getElementsByTagName(标签名) 通过css选择器获取元素 d ...

随机推荐

  1. 安装依赖库的方法-linux

    前言 使用linux系统的过程中,项目可能需要用到各种依赖库或者工具包,本文对库或者包的安装方法进行概述. 具体方法 如何安装各种依赖库或者工具包:1)直接使用apt-get install进行安装, ...

  2. Linux系统部署Web项目

    首先,需要有java环境和tomcat服务器,至于这个怎么安装,可以参考:云服务器 java+tomcat 部署与配置 项目部署 有两个大步骤: Step1 将已经写好的web项目打包成war包,在I ...

  3. 虚拟机lamp环境下，Apache配置虚拟主机

    1.在Apache配置文件中开启虚拟主机功能:即:Include etc//extra/httpd-vhosts.conf把前面的#去掉: 2.在extra目录下找到文件httpd-vhosts.co ...

  4. javaScript 之set/get方法的使用

    例1:var fe={ name:'leony', $age:null, get age(){ if(this.$age == undefined){ //this.$age == undefined ...

  5. 51Nod 1072：威佐夫游戏 （威佐夫博奕）

    1072 威佐夫游戏  基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 有2堆石子.A B两个人轮流拿,A先拿.每次可以从一堆中取任意个或从2堆中取相同数 ...

  6. vulcanjs 包类型

    npm 添加在pacakge.json 文件中的 meteor core 包 由meteor 框架提供的 meteor remote 包 从包服务器加载的,使用username:package 格式组 ...

  7. 如何开启GZIP

    服务器设置 gzip 压缩是 web 开发里很普遍的做法.假设你要请求一个 100k 的文件,网络传输速度为 50k/s,需要 2s 才能得到数据,但是如果在服务器设置了 gzip 压缩,将服务端的文 ...

  8. Anaconda 使用（解决python包管理与环境管理）

    Anaconda完全入门指南(对python环境和原理,讲的比较透彻):https://www.jianshu.com/p/eaee1fadc1e9 用pip一个一个安装第三方库费时费力,还需要考虑兼 ...

  9. php 两种短网址生成方法

    使用以下PHP代码可以生成唯一的6位的短网址. 代码如下: <?php //生成短网址方法1 function shortUrl1($url) { if (empty($url)) { retu ...

  10. Java Web Service 学习笔记

    一.服务端 1. 创建Java工程 2. 创建接口HostipalServiceInterface package ws_server; import javax.jws.WebMethod; imp ...