一：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. / is not a valid selector
			
    
			
    2. 
						
  2. [Data Structure] Linked List Implementation in Python
			
    class Empty(Exception): pass class Linklist: class _Node: # Nonpublic class for storing a linked nod ...
    
			
    3. 
						
  3. pandas Timestamp的用法
			
    (Timestamp('2018-08-01 00:00:00'), <class 'pandas._libs.tslibs.timestamps.Timestamp'>) 注意这里面的T ...
    
			
    4. 
						
  4. $.each()与$(selector).each()
			
    $.each()与$(selector).each()不同, 后者专用于jquery对象的遍历, 前者可用于遍历任何的集合(无论是数组或对象),如果是数组,回调函数每次传入数组的索引和对应的值(值亦可 ...
    
			
    5. 
						
  5. ES中Module的使用
			
    Module 1.ES6在语言标准的层面上,实现了模块功能,成为浏览器和服务器通用的模块解决方案,完全可以取代 CommonJS 和 AMD 规范,基本特点如下: 每一个模块只加载一次, 每一个JS只 ...
    
			
    6. 
						
  6. MySQL Inception--原理和注意事项
			
    ========================================================= MySQL Inception原理图 ======================= ...
    
			
    7. 
						
  7. 时间操作（JavaScript版）—年月日三级联动（默认显示系统时间）
			
    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wangshuxuncom/article/details/35263317         这个功能 ...
    
			
    8. 
						
  8. C语言面试题3
			
    编程题 1.读文件file1.txt的内容(例如): 123456 输出到file2.txt: 563412 #include <stdio.h> #include <stdlib. ...
    
			
    9. 
						
  9. hybrid app、react-native 区别
			
    hybrid app.react-native 区别: 项目 hybrid app react-native 组件 用HTML.CSS.JavaScript实现页面的制作,然后运行在Webview上( ...
    
			
    10. 
						
  10. bzoj 4025 二分图——线段树分治+LCT
			
    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4025 线段树分治,用 LCT 维护链的长度即可.不过很慢. 正常(更快)的方法应该是线段树分 ...
    
			
    11.