2021-08-19 WEB前端课堂笔记Day05

最新推荐文章于 2021-09-01 19:36:40 发布

weixin_47509934

最新推荐文章于 2021-09-01 19:36:40 发布

阅读量118

点赞数

本文链接：https://blog.csdn.net/weixin_47509934/article/details/119809704

版权

1 DOM(文档对象模型)

DOM为树形结构

作用：

JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件

分类：

Core DOM - 所有文档类型的标准模型
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型

节点：Node - 构成HTML文档的最基本单元

节点分类：

文档节点：整个HTML文档
元素节点：HTML中的HTML标签
属性节点：元素的属性
文档节点：HTML标签中的文本内容

查找HTML元素：

在这里插入图片描述

//window.onload 等待整个页面的HTML元素加载结束之后 在执行
window.onload=function(){
    // 根据元素的ID属性来获取元素
    var  bd = document.getElementById("bd");
    alert(bd);
    //根据标签名获取
    var  h1 = document.getElementsByTagName("h1");
    alert(h1.length);
    //根据类名来获取
    var h = document.getElementsByClassName("h");
    alert(h.length);
    // 根据name属性来获取
    var  hh = document.getElementsByName("hh");
    alert(hh.length);
}

节点关系：

父节点
子节点
兄弟节点

2 节点的访问

属性名称	描述
parentNode	返回结点的父节点
childNodes	返回子节点集合
firstChild	返回结点的第一个子节点最常用的用法就是获取该元素的文本节点
lastChild	返回节点的最后一个子节点
nextSibling	返回下一个结点
previousSibling	返回上一个结点

//window.onload 等待整个页面的HTML元素加载结束之后 在执行
window.onload=function(){
    var obj = document.getElementById("news");
    //获取当前元素的子节点   访问可以通过node[i]
    var node = obj.childNodes[1];
  //  console.log(node );
    //获取当前元素的第一个子节点
    var firstNode= obj.firstChild.firstChild.nextSibling.textContent;
    //console.log(firstNode);
    var lastNode = obj.lastChild.firstChild.nextSibling.nextSibling.nextSibling.innerText;
    //console.log(lastNode);
}

innerHTML：获取当前节点的HTML内容

innerText：获取当前节点的文本内容

新的属性 element 属性

属性	描述
fistElementChild	返回节点的第一个子节点
lastElementChild	返回节点的最后一个子节点
nextElementSibling	返回下一个子节点
previousElementSibling	返回上一个子节点

//window.onload 等待整个页面的HTML元素加载结束之后 在执行
window.onload=function(){
    var obj = document.getElementById("news");
// 兼顾新旧语法
    var elementNode = obj.lastElementChild.firstElementChild.nextElementSibling.innerText ||obj.lastChild.firstChild.nextSibling.nextSibling.innerText;
    console.log(elementNode)
}

3 节点信息

nodeName : 节点名称
nodeValue : 节点值
nodeType : 节点类型

节点类型	NodeType的值
元素element	1
属性attr	2
文本text	3
注释comments	8
文档document	9

3.1 nodeValue 属性

nodeValue 属性规定节点的值。

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/node.js"></script>
</head>
<body>
    <div id="box"  style="width: 200px; height: 200px; border: 1px solid black; background-color: antiquewhite;">
            这是一个div盒子
    </div>
    <ul id="u" name="ul">
        ultext
        <li>西瓜</li>
        <li>橙子</li>
        <li>柠檬</li>
    </ul>
</body>
</html>

window.onload=function(){
    // 获取元素节点
    var div = document.getElementById("box");
    console.log(div.nodeName+"---"+div.nodeType+"--"+div.nodeValue);//DIV---1--null
    var ul = document.getElementById("u").firstChild;
    console.log(ul.nodeName+"---"+ul.nodeType+"--"+ul.nodeValue);//#text---3--ultext
    // 获取属性节点
    var attr =  document.getElementById("u").getAttributeNode("name");  
    console.log(attr.nodeName+"---"+attr.nodeType+"--"+attr.nodeValue);//name---2--ul
}

4 节点操作

操作节点的属性
创建和插入节点
删除和替换节点
操作节点样式
获取元素的样式

4.1 操作节点属性

getAttribute(“属性名”) 获取该属性名对应的属性值
setAttribute(“属性名”,“属性值”) 给该属性赋值

function book(){
     var  radio = document.getElementsByName("book");
     var img = document.getElementsByTagName("img")[0];
     if(radio[0].checked){
        img.setAttribute("src","images/dog.jpg");
        img.nextElementSibling.innerHTML="<h3>"+radio[0].nextElementSibling.textContent+"</h3>";
        img.setAttribute("alt",radio[0].nextElementSibling.textContent);
     }else{
        img.setAttribute("src","images/mai.jpg");
        img.nextElementSibling.innerHTML="<h3>"+radio[1].nextElementSibling.textContent+"</h3>"
        img.setAttribute("alt",radio[1].nextElementSibling.textContent);
     }

}
function img(){
    var img = document.getElementsByTagName("img")[0];
    var alt = img.getAttribute("alt");
    alert(alt);
}

4.2 创建节点

方法	描述
createElement（tagName）	创建一个标签名为tagName的新元素节点
A.appendChild(B)	把B节点追加到A节点的末尾
insertBefore(A,B)	把A 节点插入到B节点之前
cloneNode（deep）	赋值某个指定的接地 deep 是否深度赋值

function book(){
     var  radio = document.getElementsByName("book");
     var img = document.getElementsByTagName("img")[0];
     var div0 = document.getElementsByTagName("div")[0];
     if(radio[0].checked){
        img.setAttribute("src","images/dog.jpg");
        img.nextElementSibling.innerHTML="<h3>"+radio[0].nextElementSibling.textContent+"</h3>";
        img.setAttribute("alt",radio[0].nextElementSibling.textContent);
        var newDiv = document.createElement("div");
        var newImg = document.createElement("img");
        newImg.setAttribute("src","images/dog.jpg");
        newDiv.append(newImg);
        div0.append(newDiv);

     }else{
        img.setAttribute("src","images/mai.jpg");
        img.nextElementSibling.innerHTML="<h3>"+radio[1].nextElementSibling.textContent+"</h3>"
        img.setAttribute("alt",radio[1].nextElementSibling.textContent);
     }

}
function img(){
    var img = document.getElementsByTagName("img")[0];
    var div0 = document.getElementsByTagName("div")[0];
    var alt = img.getAttribute("alt");

    var clone = img.cloneNode(false);
    var newDiv = document.createElement("div");//赋值一个节点
    // newDiv.append(clone);
   div0.append(newDiv); 
}

获取元素的内容：

textContent：获取当前元素及其后代所有元素的文本内容
innerHTML：获取当前节点所包含的html元素
innerText：获取当前节点内的文本内容不包含后代

4.3 删除和替换节点

方法名	描述
removeChild(delNode)	删除指定的节点（只能由其父节点删除）
replaceChild(newNode ,oldNode)	用新节点替换旧节点

function del(){
    var delNode = document.getElementById("first");
    // 删除的时候 需要其父节点来删除
    delNode.parentNode.removeChild(delNode);
}
function rep(){
    var  oldNode = document.getElementById("second");
    var newNode = document.createElement("img");
    newNode.setAttribute("src","images/f03.jpg");
    oldNode.parentNode.replaceChild(newNode,oldNode);
}

4.4 操作节点样式

改变样式属性：

style属性
className属性

// html元素.style.样式属性=“值”
window.onload=function(){
   document.getElementById("cart").style.color="#ff0000"
   document.getElementById("cart").style.fontSize="25px";
}

类别	属性
背景	backgroundColor backgroundImage backgroundRepeat
文本	fontSize fontWeight textAlign color font
边距	padding paddingTop paddingBottom
边框	border BorderTop BorderLeft BorderRight

常见事件：

事件名称	描述
onclick	当用户点击某个对象时调用的事件
onmouseover	鼠标移动到某个元素之上
onmouseout	鼠标从某个元素移开
onmousedown	鼠标按钮按下事件
onmouseup	鼠标按钮弹起事件

改变类名

// html元素.className="样式名称"
 function over(){
    var cart = document.getElementById("cart");
    cart.className="cartOver";
    document.getElementById("cartList").className="cartListOver";
 }
 function out(){
   document.getElementById("cart").className="cartOut";
   document.getElementById("cartList").className="cartListOut";
 }

获取样式

// html元素.style.样式属性
 console.log(document.getElementById("post").style.width );//获取内联样式
// 既可以获取到外部样式表的样式 也可以获取到内联样式  内部样式  获取的值与样式的优先级有关
console.log(document.defaultView.getComputedStyle(document.getElementById("post"),null).width);
//IE浏览的写法  了解
document.getElementById("post").currentSytle.width

4.5 获取元素位置

属性	描述
offsetLfet	返回当前元素左边界到它上级元素的左边界的距离只读属性
offsetTop	返回当前元素上边界到它上级元素的上边界的距离只读属性
offsetHeight	返回元素的高度
offsetWidth	返回元素的宽度
offsetParent	返回元素的偏移容器即对最近的动态定位的包含元素的引用
scrollTop	返回匹配元素的滚动条的垂直位置
scrollLeft	返回匹配元素的滚动条的水平位置
clientWidth	返回元素的可见宽度
clientHeight	返回元素的可见高度

    // 旧的写法
    console.log(document.body.scrollTop+"---"+document.body.scrollLeft);
    // 标准写法
    console.log(document.documentElement.scrollTop+"---"+document.documentElement.scrollLeft);

<!DOCTYPE html>
<html>

<head lang="en">
	<meta charset="UTF-8">
	<title>随鼠标滚动的广告图片</title>
	<style type="text/css">
		#main {
			text-align: center;
			width: 1014px;
			margin: 0 auto;
		}

		#adver {
			position: absolute;
			left: 10px;
			top: 30px;
			z-index: 2;
		}
	</style>

</head>

<body>
	<div id="adver"><img src="images/adv.jpg" /></div>
	<div id="main"><img src="images/main1.jpg" /><img src="images/main2.jpg" /><img src="images/main3.jpg" /></div>

	<script>
		var adverTop; //广告层距页面顶端距离
		var adverLeft;//广告层距离左端的距离
		var adverObj; //广告层对象
		function inix() {//兼容了IE浏览和其他标准浏览器
			adverObj = document.getElementById("adver"); //获得层对象
			if (adverObj.currentStyle) {
				adverTop = parseInt(adverObj.currentStyle.top);
				adverLeft = parseInt(adverObj.currentStyle.left);
			} else {
				adverTop = parseInt(document.defaultView.getComputedStyle(adverObj, null).top);
				adverLeft = parseInt(document.defaultView.getComputedStyle(adverObj, null).left);
			}
		}

		function move() {
			var sTop = parseInt(document.documentElement.scrollTop || document.body.scrollTop);
			var sLeft = parseInt(document.documentElement.scrollLeft || document.body.scrollLeft);
			adverObj.style.top = adverTop + sTop + "px";
			adverObj.style.left = adverLeft + sLeft + "px";
		}
		window.onload = inix;
		window.onscroll = move;
	</script>
</body>

</html>

weixin_47509934

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-08-19 WEB前端课堂笔记Day05

1 DOM(文档对象模型)DOM为树形结构作用：JavaScript 能改变页面中的所有 HTML 元素JavaScript 能改变页面中的所有 HTML 属性JavaScript 能改变页面中的所有 CSS 样式JavaScript 能删除已有的 HTML 元素和属性JavaScript 能添加新的 HTML 元素和属性JavaScript 能对页面中所有已有的 HTML 事件作出反应JavaScript 能在页面中创建新的 HTML 事件分类：Core DOM - 所有文档类
复制链接

扫一扫