一：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. MP算法、OMP算法及其在人脸识别的应用
			
    主要内容: 1.MP算法 2.OMP算法 3.OMP算法的matlab实现 4.OMP在压缩感知和人脸识别的应用 一.MP(Matching Pursuits)与OMP(Orthogonal Matc ...
    
			
    2. 
						
  2. Unity 3D游戏-消消乐（三消类）教程和源码
			
    Unity 消消乐教程和源码 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 1 Start Game -- ...
    
			
    3. 
						
  3. 0-1背包 codeforces 55 D
			
    题目链接: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=29608#problem/D 我把它化成了0-1背包,应该可以直接用多重背包做 ...
    
			
    4. 
						
  4. hdu2073-2078
			
    hdu2073 数学 #include<stdio.h> #include<math.h> double len(double x){ )*(x+)); } int main( ...
    
			
    5. 
						
  5. list.stream().parallel() 并行流
			
    https://blog.csdn.net/u011001723/article/details/52794455/  :  parallel()其实就是一个并行执行的流.它通过默认的ForkJoin ...
    
			
    6. 
						
  6. 【java规则引擎】《Drools7.0.0.Final规则引擎教程》第4章 4.4 LHS简介&Pattern
			
    LHS简介 在规则文件组成章节,我们已经了解了LHS的基本使用说明.LHS是规则条件部分的统称,由0个或多个条件元素组成.前面我们已经提到,如果没有条件元素那么默认就是true. 没有条件元素,官方示 ...
    
			
    7. 
						
  7. Linux内核链表
			
    内核链表的设计思路内核链表中自己实现了一个纯链表(纯链表就是没有数据区域,只有前后向指针)的封装,以及纯链表的各种操作函数(节点创建.插入.删除.遍历······).这个纯链表本身自己没有任何用处,它 ...
    
			
    8. 
						
  8. RAII vs. exceptions
			
    析构函数不能抛出异常, 原因 析构函数已经变成了异常处理的一部分 如果对象出了异常,现在异常处理模块为了维护系统对象数据的一致性,避免资源泄漏,有责任释放这个对象的资源,调用对象的析构函数,可现在假如 ...
    
			
    9. 
						
  9. greasemonkey修改网页内指定函数
			
    greasemonkey replace function? 方法1:编写GM代码 alert("hello2"); var mydiv =document.getElementB ...
    
			
    10. 
						
  10. mysql 中find_in_set()和in()用法比较
			
    mysql 中find_in_set()和in()用法比较 在mysql中in可以包括指定的数字,而find_in_set()用于特定的数据类型. find_in_set 函数使用方法 个例子来说:有 ...
    
			
    11.