一：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. Linux基础和网络管理上机试题 - imsoft.cnblogs
			
    一.(使用at命令实现任务的的自动化,要求用一条条的指令完成)      找出系统中任何以txt为后缀名的文档,并且进行打印.打印结束后给用户foxy发出邮件通知取件.指定时间为十二月二十五日凌晨两点 ...
    
			
    2. 
						
  2. ZOJ2345Gold Coins
			
    昨天做过一样的题: 平方和公式:n*(n+1)*(2n+1)/6 #include<cstdio> #include<cstdlib> #include<iostream ...
    
			
    3. 
						
  3. 20155336 2016-2017-2《JAVA程序设计》第九周学习总结
			
    20155336 2016-2017-2<JAVA程序设计>第九周学习总结 教材学习内容总结 第十六章 JDBC(Java DataBase Connectivity)即java数据库连接 ...
    
			
    4. 
						
  4. 在各OJ上的名号
			
    POJ  MekakuCityActors 牛客 MekakuCityActors hdoj MekakuCityActors 这几个难度较大,所以用Actors 博客 MekakuCityActor ...
    
			
    5. 
						
  5. 【转】python mysql数据库 'latin-1' codec can't encode character错误问题解决
			
    UnicodeEncodeError: 'latin-1' codec can't encode character   "UnicodeEncodeError:'latin-1' code ...
    
			
    6. 
						
  6. CSS3 Flexbox轻巧实现元素的水平居中和垂直居中（转）
			
    CSS3 Flexbox轻松实现元素的水平居中和垂直居中 网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点 ...
    
			
    7. 
						
  7. 重磅来袭，开源Asp.Net MVC网上商城BrnShop正式发布，提供源码下载（转）
			
    BrnShop网上商城是以Asp.Net mvc3为基础开发的网上商城,源代码完全开源(企业版的源代码目前还没有完全整理完成,一旦整理完成也全部开源). 啥话也不说了,直接上源码:下载源码(由于公司服 ...
    
			
    8. 
						
  8. Hadoop全分布模式操作
			
    http://blog.csdn.net/wangloveall/article/details/20767161 摘要:介绍Hadoop全分布模式操作,实现真正意义上的集群架构. 关键词:Hadoo ...
    
			
    9. 
						
  9. 转详解Zoosk千万用户实时通信背后的开源技术
			
    导语:本文由Zoosk(一个具有5000万会员的浪漫的社交约会网站)工程副总裁Peter Offringa所写,讲述了Zoosk的实时通信技术. 当我们的会员从Zoosk获得的最有价值的消息时,他们可 ...
    
			
    10. 
						
  10. JS替换空格回车换行符
			
    JS替换空格回车换行符 str=str.replace(/\r/g," ") str=str.replace(/\n/g,"<br />")  或  ...
    
			
    11.