JavaScript基础知识点（2）

最新推荐文章于 2024-07-24 11:09:48 发布

Dokey_L

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量166

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Dokey_L/article/details/106945543

版权

DOM基础

DOM: DOCUMENT OBJECT MODEL(文档对象模型)的缩写。

DOM查找方法–获取元素的方法

document.getElementById() – 根据id获取唯一的一个元素；
document.getElementsByTagName() – 返回所有的tag标签引用的集合 – 返回的是数组；
document.getElementsByName() – 返回所有的name属性引用的集合 – 返回的是数组；
document.getElementsByClassName() – 返回包含带有指定类名的所有元素的集合 – 返回的是数组；

设置元素的样式

语法：ele.style.stylName = styleValue

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <p class="p1" id="p1">元素获取</p>
</body>
<script type="text/javascript">
  var ele1 = document.getElementById("p1");
  // 设置元素的样式
  // ele.style.stylName = styleValue
  // styleName表示要设置的样式名称  --  使用驼峰命名方式  -- 比如fontSize
  // styleValue  --  要设置的样式的值
  ele1.style.color="red";
  console.log(ele1);
</script>
</html>

innerHTML

innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
语法：ele.innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <p id="p1"><b>元素</b></p>
</body>
<script type="text/javascript">
  var ele = document.getElementById("p1");
  // ele.innerHTML
  // 返回ele元素开始和结束标签之间的HTML
  console.log(ele.innerHTML);//显示的是<b>元素</b>


  // ele.innerHTML=" ";
  // 设置ele元素开始和结束之前的HTML内容为html
  ele.innerHTML="添加";
  console.log(ele);//原来p标签内的"元素"变为"添加""
</script>
</html>

className

语法：ele.classname

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <p class="p1" id="p1">adad</p>
</body>
<script type="text/javascript">
  var ele = document.getElementById("p1");
  // ele.className返回ele元素的class属性
  console.log(ele.className);//显示的是p1
  // 设置ele元素的class属性为..
  ele.className="p2";
  console.log(ele.className);//显示的是p2
</script>
</html>

设置DOM元素属性或添加属性

获取属性
语法：ele.getAttribute("attribute ")
设置属性
ele.setAttribute(“attribute”,value)
删除属性
ele.removeAttribute(“attribute”)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <p class="p1" id="p1" style="color:red;">元素</p>
</body>
<script type="text/javascript">
  var ele = document.getElementById("p1");
  // ele.getAttribute("attribute")获取ele元素的属性
    // ele  --  要操作的DOM对象
    // attribute  --  是要获取的html属性（id  type class）
  // console.log(ele.getAttribute('class'));//显示的是p1
  // console.log(ele.getAttribute('style'));//显示的是color:red;
  


  // setAttribute(attribute,value)更改某个属性的属性值
  // ele.setAttribute("class","p2");
  // console.log(ele.getAttribute('class'));//显示的是p2


  // removeAttribute(attribute)删除某个属性
  ele.removeAttribute("class");
  console.log(ele);//显示的是<p id="p1" style="color:red;">元素</p>

</script>
</html>

DOM事件

HTML事件
HTML 事件是发生在 HTML 元素上的“事情”。
当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。
语法：<tag 事件=“执行脚本”>；
功能：在html元素上绑定事件；
说明：执行脚本可以是一个函数的调用；
DOM0级事件
通过DOM获取HTML元素。
语法：ele.事件 = 脚本；
功能：在DOM对象上绑定事件；
说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用；
关于this的指向
JavaScript this 关键词指的是它所属的对象。
它拥有不同的值，具体取决于它的使用位置：

在方法中，this 指的是所有者对象。
单独的情况下，this 指的是全局对象。
在函数中，this 指的是全局对象。
在函数中，严格模式下，this 是 undefined。
在事件中，this 指的是接收事件的元素。

鼠标事件

onload – 页面加载时触发
onclick – 鼠标点击时触发
onmouseover – 鼠标滑过时触发
onmouseout – 鼠标离开时触发
onfoucs – 获得焦点时触发 – input标签type为text password / textarea标签
onblur – 失去焦点时触发
onchange – 域的内容发生改变时触发 – 一般作用在select、chaecbox、radio
onsubmit事件 – 表单中的确认按钮被点击时发生 – 不是加在按钮上而是表单上
onmousedown – 鼠标按钮在元素上按下时触发
onmouseup – 在元素上松开鼠标按钮时触发 – 2和3成就了onclick事件
onmousemove – 在鼠标指针移动时触发
onresize – 当调整浏览器窗口大小时触发
onscroll – 拖动滚动条滚动时触发

键盘事件

onkeydown – 在用户按下一个键盘按键时触发
onkeypress – 在按下键盘按键时发生（只会响应字母和数字符号）
onkeyup – 在键盘按键松开时发生
keycode：返回onkeypress onkeydown 或者onkeyup事件触发的键的值得字符代码，或者键的代码

BOM基础

BOM:(browser object model) – 浏览器对象模型。
window是浏览器的一个实例

是通过JavaScript访问浏览器窗口的一个接口；
又是ecmascript规定的global对象 – 全局对象；

window对象的方法

window.alert();
window.confirm(“message”);
a. 点击确定，返回true
b. 点击取消，返回false
window.prompt()
window.open()
window.close()
location对象 – window对象的属性，也是document对象的属性
• window.location.href 返回当前页面的 href (URL)；
• window.location.hostname 返回 web 主机的域名；
• window.location.pathname 返回当前页面的路径或文件名；
• window.location.protocol 返回使用的 web 协议（http: 或 https:）；
• window.location.assign 加载新文档；
history.back() – history.go(-1) – 回退
history.forward() – history.go(1) – 前进

Dokey_L

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础知识点（2）

DOM基础DOM: DOCUMENT OBJECT MODEL(文档对象模型)的缩写。DOM查找方法–获取元素的方法document.getElementById() – 根据id获取唯一的一个元素；document.getElementsByTagName() – 返回所有的tag标签引用的集合 – 返回的是数组；document.getElementsByName() – 返回所有的name属性引用的集合 – 返回的是数组；document.getElementsB
复制链接

扫一扫