欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-03 12:41:44
基本使用 写在Script 标签里 引入外部js文件:\ console.log(" ") 方法用于在控制台输出信息 注意事项 严格区大小写 每一行完整语句后面加分号 变量名不能使用关键字和保留字 代码要缩进,保持可读性 修改元素内容 获取元素 通过id获取元素:document.getElemen ......

基本使用

  • 写在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 变量名