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

2022-10-12,,,,

基本使用

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

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

下载本文的Word格式文档,以方便收藏与打印。