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

Posted 2020-11-26 纪宇-年华

基本使用

• 写在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
• 布尔：boolean
• 未定义：undefined
• 空：null
• 对象：object
• 查看数据类型：typeof 变量名