JS DOM（文档对象模型）

最新推荐文章于 2022-09-13 10:53:54 发布

faine℃

最新推荐文章于 2022-09-13 10:53:54 发布

阅读量264

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_41828282/article/details/98943090

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

1 什么是HTML DOM

dom节点列表图

HTML DOM是HTML的标准对象模型和编程接口。换言之，HTML DOM 是关于如何获取、更改、添加或删除HTML元素的标准；

DOM编程界面是每个对象的属性和方法。
属性是您能够获取或设置的值（就比如改变HTML元素的内容）
方法是您能够完成的动作（比如添加或者删除HTML元素）。

查找HTML元素方法：

方法	描述
document.getElementById( id )	通过元素id来查找元素
document.getElementByTagName(name)	通过标签名来查找元素
document.getElementByClassName(name)	通过类名来查找元素
document.querySelectorAll(name)	通过css选择器查找HTML元素

改变HTML元素方法：

方法	描述
element.innerHTML = new html content	改变元素的inner HTML
element.attribute = new value	改变HTML元素的属性值
element.setAttribute(attribute, value)	改变HTML元素的属性值
element.style.property = new style	改变HTML的样式

添加和删除元素

方法	描述
document.createElement(element)	创建HTML元素
document.removeChild(element)	删除HTML元素
document.appendChild(element)	添加HTML元素
document.replaceChild(element)	替换HTML元素
document.write(text)	写入HTML输出流

添加事件处理程序

方法	描述
document.getElementById(id).onclick = function(){code}	向 onclick 事件添加事件处理程序

2 改变css

改变HTML元素的样式，语法如下：

document.getElementById(id).style.property = new style
/*----------------示例如下---------------*/
document.getElementById("p2").style.color = "blue";

3 事件

3.1 onload和onunload事件

当用户进入或离开页面时，会触发onload和onunload事件；

onload可用于检测访问着的浏览器类型和浏览器版本，然后计与该信息加载网页的恰当版本；
onload和onunload事件可用于处理cookie;

<body onload = "checkCookies()">
function checkCookies() {
  var text = "";
  if (navigator.cookieEnabled == true) {		//判断浏览器是否启用了cookie
    text = "Cookie 已启用";
  } else {
    text = "Cookie 未启用";
  }
  document.getElementById("demo").innerHTML = text;
</body>

3.2 onchange事件

onchange事件经常与输入字段验证结合使用。

<input type="text" id="fname" onchange="myFunction()">

3.3 onmouseover 和onmouseout事件

用于当用户将鼠标移至HTML元素上或一处时触发某个函数；

<div onmouseover="mOver(this)" onmouseout="mOut(this)" 
style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
请把鼠标移上来</div>
<script>
function mOver(obj) {
  obj.innerHTML = "谢谢您"
}
function mOut(obj) {
  obj.innerHTML = "请把鼠标移上来"
}
</script>

3.4 onmousedowm和onmouseup以及onclick事件

当鼠标按下时触发onmousedown事件；
当鼠标抬起时触发onmouseup事件；
整个点击过程就是一个onclick事件；

4 事件监听器

4.1 事件冒泡和事件捕获

在html DOM中由两种事件传播方法：冒泡和捕获。

在冒泡中，最内侧元素会首先被处理，然后是更外侧的；比如：首先处理<p>元素的点击事件，然后是<div>元素的点击事件；
在捕获中，最外侧元素的事件会首先被处理，然后是更内测的；比如：首先处理<div>元素的点击事件，然后是<p>元素的点击事件；

在addEventListerer()方法中，通过使用“useCapture”参数来规定传播类型：

addEventListener(event, function, useCapture);

默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播。

5 节点

5.1 DOM根节点

访问完整文档：

document.body.innerHTML;
document.documentElement.innerHTML;

5.2 创建、删除和替换节点

方法	描述
element.appendChild(para)	在已有元素最后添加新元素
element.insertBefore(para, child);	在para和chid之间添加新元素
document.removeChild(“div”)	删除已有的HTML元素
document.replaceChild(para, child)	将para对应的元素替换为child对应的元素

<div id="div1">
	  <p id="p1">这是第一段文字</p>
	  <p id="p2">这是第二段文字</p>
</div>

var para = document.createElement("p");				//创建新的<p>元素
var node = document.createTextNode("这是新的文本");	//创建文本节点
para.appendChild(node);								//向<p>元素追加这个文本节点

var element = document.getElementById("div1");
var var child = document.getElementById("p1");
element.appendChild(para);							//在div标签中后面添加para节点
element.insertBefore(para, child);					//在div标签中且id为p1之前添加para节点
element.removeChild(child);							//在div标签中删除id为p1标签的元素
element.replaceChild(para, child);					//将div标签中id为p1标签的元素替换为para

5.3 DOM集合

getElementByTagName()方法返回HTMLCollection对象。
HTMLCollection对象是类数组的HTML元素列表；

<p>1111</p>
<p>2222</p>
var myCollection = document.getElementsByTagName("p");
myCollection[1].innerHTML;	//2222

length属性定义了HTMLCollection中元素的数量；

5.4 HTML DOM节点列表

NodeList对象与HTMLCollection对象几乎相同；
返回NodeList对象的函数有以下：

getElementsByClassName()：老浏览器返回
childNodes属性返回NodeList对象；
querySelectorAll()方法；

6 浏览器弹出窗

函数	描述	备注
alert()	警告框
confirm()	确认框	返回值为BOOL
prompt()	提示框

7 Timing定时器

setTImeout(function, milliseconds);
setInterval(function, milliseconds);
clearTimeout()方法停止定时器计时

setTimeout()和setInterval()函数都是定时事件，只是setTimeout()只能执行一次function，而setInterval()函数只能执行一次function;

8 cookie

8.1 cookie定义

cookie是在计算机上存储在小的文本文件中的数据；当web服务器向浏览器发送网页后，连接被关闭，服务器会忘记用户的一切；
JavaScript可以通过document.cookie属性创建、读取、删除cookie.

8.2 通过Js创建cookie

/*-------------1. 通过js创建cookie-----------------------*/
/*expires : 有效日期，默认是浏览器关闭时删除cookie*/
/*path : 告诉浏览器时什么路径，默认cookie属于当前页*/
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
/*-----------2. 通过javascript读取cookie----------------*/
var cook = document.cookie;
/*-----3. 通过javascript改变cookie(与创建相同，旧的会覆盖)---------*/
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
/*------4. 删除cookie(直接将expires参数设置为过去的日期)--------------*/

cookie练习：

<script>
//cookie设置
function setCookie(cname,cvalue,exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires=" + d.toGMTString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
//为过期，直接从浏览器中取到cookie
function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for(var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}
//检查cookie是否过期
function checkCookie() {
  var user=getCookie("username");
  if (user != "") {
    alert("再次欢迎您，" + user);
  } else {
     user = prompt("请输入姓名：","");
     if (user != "" && user != null) {
       setCookie("username", user, 30);
     }
  }
}
</script>
</head>

<body onload="checkCookie()"></body>

faine℃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS DOM（文档对象模型）

文章目录1 什么是HTML DOM1 什么是HTML DOMHTML DOM是HTML的标准对象模型和编程接口。换言之，HTML DOM 是关于如何获取、更改、添加或删除HTML元素的标准；DOM编程界面是每个对象的属性和方法。属性是您能够获取或设置的值（就比如改变HTML元素的内容）方法是您能够完成的动作（比如添加或者删除HTML元素）。查找HTML元素方法：...
复制链接

扫一扫