JS获取元素、修改元素/css样式/标签属性、简单事件、数据类型

基本使用

• 写在script 标签里
• 引入外部js文件：<script src=" "></script>
• console.log(" ") 方法用于在控制台输出信息
  
  

注意事项

• 严格区大小写
• 每一行完整语句后面加分号
• 变量名不能使用关键字和保留字
• 代码要缩进，保持可读性
  
  

修改元素内容

• 获取元素
  • 通过id获取元素：document.getelementbyid(“”);
  • 通过class名字获取元素：document.getelementsbyclassname(“”);
  • 通过标签名获取元素：document.getelementsbytagname(“”);
  • 通过 name的属性获取元素，一般用于input：document.getelementsbyname(“”);
  • 通过css选择器获取一个：document.queryselector (“”);
  • 通过css选择器获取所有：document.queryselectorall(“”);
• 修改元素内容
  • var 是 js 定义变量的关键字：var content = document.get....
  • innerhtml 和 innertext 可以修改/获取（html内容和文本内容）：content.innerhtml="<h1>标题</h1>"
    
    

简单事件

• 单击事件：onclick
• 双击事件：ondblclick
• 鼠标划入：onmouseenter
• 鼠标划出：onmouseleave
• 窗口变化时：onresize
• 改变下拉框时：onchange
  
  

修改样式（通过js修改css）

• 获取元素：var box = document.getelementbyid("div1");
• 方法一：box.style.border="1px red solid";
• 方法二：box.style["border"]="1px red solid";
  
  

操作标签属性

• 自带属性
  • box.classname="d1";
• 自定义属性
  • 设置属性： box.setattribute('aaa','bbb');
  • 删除属性：box.removeattribute("class");
  • 判断是否存在属性：box.hasattribute("aaa")
    
    

数据类型

• 字符串：string
• 数字：number
• 非数字：nan
• 布尔：boolean
• 未定义：undefined
• 空：null
• 对象：object
• 查看数据类型：typeof 变量名