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

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

弱类型体现：

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

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

<head>

    <script>

         window.onload = function(){

         alert(1)

        }

    </script>

</head>

<body>

    <script>

        alert(2);

        console.log("haha");

    </script>

</body>

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

     

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

1.行内

<body>

    <!--1.行内 单击时弹出窗口 显示 1-->

    <div onclick="alert(1)"></div>

</body>

效果

2.元素内

<body>

    <!--2.script标签内-->

    <script>

        alert(2);

        console.log("打印在控制台");>

    </script>

</body>

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

  

3.外链

<body>

    <script src="new.js"></script>

</body>

　　new.js

alert("我先")

console.log("haha")

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

  

 定义变量

<body>

   <script>

        var a=1;        // number

        var b=1.1;      // number

        var c="haha";   // string

        var x=10,y=11;  //同时设置多个值

        alert(typeof(a));   // 弹出 a 的类型

        alert(x+y)         // 弹出 x+y的值

    </script>

</body>

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

    </script>

        var d,f;

        d=1;

        f=2;

        alert(d*f);

    </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>"

<body>

    <script>

        document.title="改变标题"  // 只有title 这样写

        // document.body = "body网页上显示的内容"   // 报错，除title以外，body后面还得加上innerHTML

        // document.body.innerHTML = "body网页上显示的内容"   // 将值赋给了整个body，body拥有的其他内容就没了

        document.body.innerHTML += "body网页上显示的内容"   // 消除方法 += 。新增加内容

    </script>

</body>

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

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        div{

            width: 100px;

            height: 100px;

            background: red;

        }

    </style>

</body>

    <div id="box1" title="h">我是div</div>        /*这儿的title是 鼠标移到div上会显示的内容是h*/

    <script>

        document.getElementById("box1").innerText="通过id获取元素在改变的"

    </script>

</body>

效果  改之前                              之后

     

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

document.getElementsByTagName("p")

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

    </style>

</head>

<body>

    <p>1</p>

    <p>2</p>

    <p>3</p>

    <p>4</p>

    <script>

        // 通过标签名获取 Tagname 多个p标签  需要加下标

        // document.getElementsByTagName("p");

        var oP=document.getElementsByTagName("p");

        // 查看有几个元素

        alert(oP.length);  // 弹出窗口显示4 代表有四个P

        // 通过下标该值 改第一个P

        oP[0].innerHTML+="第一个p";

    </script>

</body>

</html>

效果

4.通过classname

        // 通过classname

        var oClassname=document.getElementsByClassName("box2");

        alert(oClassname.length)

        oClassname.innerHTML[0]="dff";

    </script>

5.通过选择器

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

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

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

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

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

三：write方法  有两种情况

    <div>

        测试write

    </div>

    <script>

        // 1.在文档流关闭之前写入

        document.write("在文档流关闭之前写入")

    </script>

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

                  

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

    <script>

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

        window.onload=function () {

            document.write("在文档流关闭之后写入")

        }

    </script>

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



												


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

    
						
  1. javascript获取元素的方法[xyyit]
		
    1. javascript默认的方法: <div id=”div_id” class=”div_class” name=”div_name”></div> //1. 根据id  ...
    
		
    2. 
						
  2. JavaScript通过元素id和name直接获取元素的方法
		
    概览: 偶然的机会,我在JavaScript中直接用HTML元素的id属性来获取该元素,并设置该元素的其他属性值,竟然能够正确解析不报错!于是我去查阅相关资料,也有其他同行这么用. 虽然说这种用法不是 ...
    
		
    3. 
						
  3. javascript 获取元素样式的方法
		
    javascript 获取元素样式常用方法. Javascript获取CSS属性值方法:getComputedStyle和currentStyle  1 .对于元素的内联CSS样式(<div s ...
    
		
    4. 
						
  4. 详细解析 JavaScript 获取元素的坐标
		
    引言 最近突然看到了有关图片懒加载的问题,大致意思就是初始状态下页面只加载浏览器可视区域的图片,剩余图片在当浏览器可视区域滚动到其位置时才开始加载.貌似现在许多大型网站都有实现懒加载,所以我便就此问题 ...
    
		
    5. 
						
  5. JQuery获取元素的方法总结
		
    JQuery获取元素的方法总结 一.说明   获取元素的方法分为两种:jQuery选择器.jQuery遍历函数. 做个总结,巩固下知识. 二.获取本身 1.只需要一种jQuery选择器   选择器 实 ...
    
		
    6. 
						
  6. JavaScript获取元素样式
		
    原生的JavaScript获取写在标签内部的样式很简单: <div class="test" id="test" style="width:10 ...
    
		
    7. 
						
  7. 【鬼脸原创】JQuery获取元素的方法总结
		
    目录 一.说明 二.获取本身 三.获取同级元素 四.获取父级元素 五.获取子级元素 一.说明   获取元素的方法分为两种:jQuery选择器.jQuery遍历函数. 做个总结,巩固下知识. 二.获取本 ...
    
		
    8. 
						
  8. javascript获取时间戳的方法
		
    javascript获取时间戳的方法<pre> START = new Date().getTime();</pre>这个是毫秒 除以1000就是秒啦
    
		
    9. 
						
  9. selenium获取元素信息方法(转载)
		
    1.获取当前页面的Url函数 方法:current_url 实例: driver.current_url 2.获取元素坐标 方法:location 解释:首先查找到你要获取元素的,然后调用locati ...
    
		
    10. 
						
  10. JavaScript中的获取元素的方法
		
    通过id获取元素 document.getElementById(id名字) 通过标签获取元素 document/元素.getElementsByTagName(标签名) 通过css选择器获取元素 d ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. Mongodb  $setOnInsert操作符 和upsert:true
			
    upsert:true:如果要更新的文档不存在的话会插入一条新的记录 $setOnInsert操作符会将指定的值赋值给指定的字段,如果要更新的文档存在那么$setOnInsert操作符不做任何处理:  ...
    
			
    2. 
						
  2. 微信小程序实现多选分享
			
    微信小程序拉取好友列表后,默认只能选一个分享,现在在分享回调onShareAppMessage里加上这段代码,拉取好友列表时,右上角会出现多选按钮,这样就解决了微信小程序安卓下只能单选分享的问题. / ...
    
			
    3. 
						
  3. 【maven】使用import scope解决maven继承（单）问题
			
    测试环境 maven 3.3.9 想必大家在做SpringBoot应用的时候,都会有如下代码: <parent> <groupId>org.springframework.bo ...
    
			
    4. 
						
  4. shell学习笔记汇总
			
    1.shell脚本中函数使用 函数定义在前,调用在后,顺序反了就没有效果了.函数调用为:函数名 参数列表 函数内部通过以下变量访问函数的参数:shell脚本函数中: $0: 这个脚本的名字 $n: 这 ...
    
			
    5. 
						
  5. StreamSets  sdc rpc 测试
			
    一个简单的参考图 destination pipeline 创建 pipeline flow sdc destination 配置 origin sdc rpc pipeline pipeline f ...
    
			
    6. 
						
  6. asm数据文件迁移(os–>asm)
			
    --添加测试表空间 SQL> create tablespace xff datafile '/u01/oradata/xifenfei.dbf' size 10m autoextend on  ...
    
			
    7. 
						
  7. Angular 4 表单校验1
			
    1.html <form [formGroup]="formModel" (submit)="submit()"> <div> 用户名: ...
    
			
    8. 
						
  8. 大快DKH大数据智能分析平台监控参数说明
			
    2018年国内大数据公司50强榜单排名已经公布了出来,大快以黑马之姿闯入50强,并摘得多项桂冠.Hanlp自然语言处理技术也荣膺了“2018中国数据星技术”奖.对这份榜单感兴趣的可以找一下看看.本篇承 ...
    
			
    9. 
						
  9. wsdl详解
			
    <wsdl:definitions xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/" xmlns:ns1="http:// ...
    
			
    10. 
						
  10. ASP.NET ASHX中获得Session
			
    有时候需要在ASHX中获取Session,可是一般是获取不到的,如何解决? 1-在 aspx和aspx.cs中,都是以Session["xxx"]="aaa"和 ...
    
			
    11.