Web前端开发与设计08-JavaScript操作DOM对象

学习要点

  • DOM分类
  • DOM节点间关系
  • 访问DOM节点
  • 节点的创建、添加、删除、替换
  • 设置元素的样式
  • 获取节点位置属性

DOM模型

DOM定义

  • DOM Core：W3C针对XML文档的操作规范。适用于XML和HTML。
  • HTML-DOM：W3C针对HTML文档的操作规范。只适用于HTML。
  • CSS-DOM：操作CSS的DOM，把style属性封装成对象进行操作。

DOM结构

节点间的关系主要有：根节点、父节点、子节点、节点属性、节点value值和节点文本内容。

访问节点

getElement方法

  • getElementById()
  • getElementsByName()
  • getElementsByTagName()

根据层次关系访问节点

1、节点属性

注意：使用以上属性，html文档中的换行会被当成空格处理，空格也被当成节点对象（文本节点）；大于等于一个空格都被当成一个文本节点对象。

示例代码：

<section id="news">
<header>京东快报<a href="#">更多 > </a></header>
<ul>
    <li><a href="#">志玲姐姐：墨镜300减30</a></li>
    <li><a href="#">京东无锡馆正式启动</a></li>
    <li><a href="#">99元抢平板！品牌配件199-100</a></li>
    <li><a href="#">节能领跑京东先行</a></li>
    <li><a href="#">高洁丝实力撩货，领券五折</a></li>
</ul>
</section>
<script type="text/javascript">
 var obj = document.getElementById("news");
 var str = obj.firstChild.nextSibling.innerHTML;
 alert(str);
</script>

　　

2、element属性

注意：element只获取节点对像，忽略文本节点对象。

示例代码：

<section id="news">
<header>京东快报<a href="#">更多 > </a></header>
<ul>
    <li><a href="#">志玲姐姐：墨镜300减30</a></li>
    <li><a href="#">京东无锡馆正式启动</a></li>
    <li><a href="#">99元抢平板！品牌配件199-100</a></li>
    <li><a href="#">节能领跑京东先行</a></li>
    <li><a href="#">高洁丝实力撩货，领券五折</a></li>
</ul>
</section>
<script type="text/javascript">
 var obj = document.getElementById("news");
	var str = obj.lastElementChild.firstElementChild.innerHTML
			|| obj.lastChild.firstChild.innerHTML;
 alert(str);
</script>

　　

解释：“||”逻辑或运算符。实际项目写法，确保浏览器兼容性和正确读取参数。

  • 只要“||”前面为false,不管“||”后面是true还是false，都返回“||”后面的值。
  • 只要“||”前面为true,不管“||”后面是true还是false，都返回“||”前面的值。

节点信息

1、常用节点信息

  • nodeName：节点名称
  • nodeValue：节点值
  • nodeType：节点类型

2、节点类型和值对应表

3、示例代码

<ul id="nodeList">
<li>nodeName</li>
<li>nodeValue</li>
<li>nodeType</li>
</ul>
<p></p>
<script>
    var nodes=document.getElementById("nodeList");
    var type1=nodes.firstChild.nodeType;//元素1
    var type2=nodes.firstChild.firstChild.nodeType;//文本3
    var name1=nodes.firstChild.firstChild.nodeName;//节点名称：文本
    var str=nodes.firstChild.firstChild.nodeValue;//nodename
var con="type1："+type1+"<br/>type2："+type2+"<br/>name1："+
name1+"<br/>str："+str;
    document.getElementById("nodeList").nextSibling.innerHTML=con;
</script>

　　

操作节点

节点的主要操作

操作节点的属性

语法：

getAttribute("属性名")

setAttribute("属性名","属性值")

示例代码：

<body>
<p>选择你喜欢的书：
    <input type="radio" name="book" onclick="book()">我和狗狗一起活下来
    <input type="radio" name="book" onclick="book()">灰霾来了怎么办
</p>
<div>
<img src=""  id="image" onclick="img()">
<span></span>
</div>
<script>
    function book() {
        var ele = document.getElementsByName("book");
        var img = document.getElementById("image");
        if (ele[0].checked) {
            img.setAttribute("src", "images/dog.jpg");
            img.setAttribute("alt", "我和狗狗一起活下来");
            img.nextSibling.innerHTML = "我和狗狗一起活下来";
        }
        else if (ele[1].checked) {
            img.setAttribute("src", "images/mai.jpg");
            img.setAttribute("alt", "灰霾来了怎么办");
            img.nextSibling.innerHTML = "灰霾来了怎么办";
        }
    }
    function img() {
   var alt = document.getElementById("image").getAttribute("alt");
        alert("图片的alt：" + alt)
    }
</script>
</body>

　　

创建和插入节点

1、常用方法：

2、示例代码：

<p>选择你喜欢的书：
<input type="radio" name="book" onclick="book()">我和狗狗一起活下来
<input type="radio" name="book" onclick="book()">灰霾来了怎么办
</p>
<div></div>
<script>
function book() {
    var ele = document.getElementsByName("book");
    var bName = document.getElementsByTagName("div")[0];
    if (ele[0].checked) {
        var img = document.createElement("img");
        img.setAttribute("src", "images/dog.jpg");
        img.setAttribute("alt", "我和狗狗一起活下来");
        bName.appendChild(img);
}
    else if (ele[1].checked) {
            var img = document.createElement("img");
            img.setAttribute("src", "images/mai.jpg");
            img.setAttribute("alt", "灰霾来了怎么办");
            img.setAttribute("onclick", "copyNode()")
            bName.appendChild(img);
        }
    }
    function copyNode() {
        var bName = document.getElementsByTagName("div")[0];
        var copy = bName.lastChild.cloneNode(false);
        bName.insertBefore(copy, bName.firstChild);
    }
</script>

　　

3、如何复制节点的事件？

使用javascript复制节点的事件需要重新注册事件监听，过程繁琐，并存在浏览器兼容性问题，建议使用jquery的colone()方法，jQuery后面详细讲解。示例代码：

<script src="script/jquery-1.12.4.js" type="text/javascript"></script>
<script>
    $(function () {
        $("button").click(function () {
            $(this).clone(true).insertAfter(this);
        });
    });
</script>
<button onclick="alert(‘click me‘)">按钮克隆</button>

　　

删除和替换节点

1、常用方法

2、示例代码

<body>
    <ul>
        <li>
            <img src="images/f01.jpg" id="first">
            <p><input type="button" value="删除我吧" onclick="del()"></p>
        </li>
        <li>
            <img src="images/f02.jpg" id="second">
            <p><input type="button" value="换换我吧" onclick="rep()"></p>
        </li>
    </ul>
<script>
    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);
    }
</script>

　　

操作节点样式

1、应用案例

示例：实现鼠标移至“我的购物车”显示商品内容。

2、原理

改变网页元素样式的属性：style属性和className属性。

3、sytle属性
3.1  语法格式
HTML元素.style.样式属性＝"值"
示例代码

document.getElementById("titles").style.color="#ff0000";
document.getElementById("titles").style.fontSize="25px ";

　　

3.2  常用事件

3.3  示例代码

function over(){
        document.getElementById("cart").style.backgroundColor="#ffffff";
        document.getElementById("cart").style.zIndex="100";
        document.getElementById("cart").style.borderBottom="none";
        document.getElementById("cartList").style.display="block";
        document.getElementById("cartList").style.position="relative";
        document.getElementById("cartList").style.top="-1px";
}
function out(){
   document.getElementById("cart").style.backgroundColor="#f9f9f9";
   document.getElementById("cart").style.borderBottom="solid 1px #dcdcdc";
   document.getElementById("cartList").style.display="none";
}

　　

4、className属性

4.1  语法格式

HTML元素.className="样式名称"

4.2  示例代码

function over(){
document.getElementById("cart").className="cartOver";
document.getElementById("cartList").className="cartListOver";
}
function out(){
document.getElementById("cart").className="cartOut";
document.getElementById("cartList").className="cartListOut";

　　

获取元素样式

1、方式一：style方式
语法格式
HTML元素.style.样式属性;
示例代码

alert(document.getElementById("cartList").display);

　　

2、方式二：getComputedStyle
语法格式
document.defaultView.getComputedStyle(元素,null).属性;
第二个参数：伪类选择，如果元素不是伪类，设置为null
示例代码

var cartList=document.getElementById("cartList");
alert(document.defaultView.getComputedStyle(cartList,null).display);

　　

3、方式三：currentStyle（兼容IE）
语法格式
HTML元素. currentStyle.样式属性;
示例代码

alert(document.getElementById("cartList").currentStyle.display);

　　

获取元素的位置

应用场景

如何实现网页固定位置菜单或者广告？

实现方式：position样式属性或者通过HTML元素位置属性进行设置。

元素位置相关属性

  • 标准浏览器
document.documentElement.scrollTop;
document.documentElement.scrollLeft;

　　

  • Chrome
document.body.scrollTop;
document.body.scrollLeft;

　　

  • 兼容方式
var sTop=document.documentElement.scrollTop||document.body.scrollTop;

　　

随鼠标滚动的广告图片

var adverTop; //层距页面顶端距离
	var adverLeft;
	var adverObj; //层对象
	function inix(){
		adverObj=document.getElementById("adver"); //获得层对象
		if(adverObj.currentStyle){//IE
			adverTop=parseInt(adverObj.currentStyle.top);
			adverLeft=parseInt(adverObj.currentStyle.left);
		}
		else{//Chrome
			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;

　　

原文地址：https://www.cnblogs.com/rask/p/12398930.html

时间： 2024-08-30 03:40:17

Web前端开发与设计08-JavaScript操作DOM对象的相关文章

JavaScript 操作Dom对象

1)JavaScript  操作DOM對象 1.DOM:是Document  Object  Model 的缩写,及文档对象模型 2.DOM通常分为三类:DOM Core(核心).HTML-DOM 和 CSS-DOM 1.DOM Core DOM Core 不是JavaScript的专属品,任何一种支持DOM的编辑器语言都可以使用它 它的用途不仅限于处理一种使用标记语言编写出来的文档如HTML文档 getElementById()/getElementByTagName()等方法都是 DOM C

Web前端开发与设计09-jQuery基础及其基本选择器

学习要点 jQuery概述 jQuery语法 DOM对象和jQuery对象 jQuery选择器概述 通过css选择器选取元素 通过条件过滤选取元素 jQuery概述 简介 jQuery由美国人John Resig于2006年创建. jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装. 它的设计思想是write less,do more. 初识jQuery 1.JavaScript如何实现表格的隔行变色? javascirpt实现代码: Window.

Web前端开发与设计06-JavaScript基础

学习要点 JavaScript核心语法 JavaScript程序调试 JavaScript函数 为什么学习JavaScript 应用场景 嵌入动态文本于HTML页面,对浏览器事件做出响应. 读写HTML元素. 在数据被提交到服务器之前验证数据. 检测访客的浏览器信息. 控制cookies,包括创建和修改等. 基于Node.js技术进行服务器端编程. 本次课程应用之一:表单验证 本次课程应用之二:页面动态效果 JavaScript简介 javascript的发展历程 Netscape(网景)公司在

javascript操作dom对象

什么叫DOM? DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C出台的推荐标准,每个浏览器都有一些细微的差别,其中以Mozilla的浏览器最与标准接近. DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容. 查找元素 1.直接查找 方法名 描述 getElementById(id) (document) 获取有指定惟一ID属性值文档中的元素 getElementsByTagNam

Web前端开发规范【HTML/JavaScript/CSS】

前言 这是一份旨在增强团队的开发协作,提高代码质量和打造开发基石的编码风格规范,其中包含了 HTML, JavaScript 和 CSS/SCSS 这几个部分.我们知道,当一个团队开始指定并实行编码规范的话,错误就会变得更加显而易见.如果一段特定的代码不符合规范的话,它有可能只是代码风格错误,而也有可能会是 bug.早期指定规范就使得代码审核得以更好的开展,并且可以更精确的地定位到错误.只要开发者们能够保证源代码源文件都严格遵循规范,那接下去所使用的混淆.压缩和编译工具则可投其所好不尽相同. 要

WEB前端开发学习----4.用JavaScript实现网页游戏的移动效果

想必大家都玩过网页游戏吧.随着HTML5的普及,浏览器+云端的web app成为了未来的趋势.很多效果都离不开JavaScript.所以说要想进行web开发,JavaScript一定得学好. 那网页游戏中是怎么实现人物的移动效果呢,今天分享一个很基础的简单方法. 效果图如下:点击上边的按钮,暴走小人开始向右移动. HTML+CSS部分非常简单.就不多说了.需要注意的是图片要使用绝对定位. 那么怎么让图片向右动起来呢? 由于图片有position属性,那么我们只需要改变它的属性值就可以了.比如说我

Web前端开发与设计02-表单

学习要点 表单 表单的高级应用 语义化的表单 表单的初步验证 表单 定义 表单在网页中应用广泛,例如:登陆.注册.订单信息录入.调查问卷.搜索等等.例如京东注册页面. 常见的表单元素:文本框,密码框,下来列表框,多选框,提交按钮等等.语法: <form method="post" action="result.html"> <p> 名字:<input name="name" type="text"

Web前端开发与设计13-购物车案例

说明 使用js脚本实现商品的添加.修改.删除.价格计算. 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript实现购物车功能</title> <style type="text/css"> .num { width: 30px; } </st

Web前端开发与设计10-jQuery中的事件和动画

学习要点 jQuery中的事件 jQuery中的动画 网页中的事件 网页中的事件是实现和用户交互的基础. 例如tab页切换效果,可以通过鼠标点击事件来实现. jQuery中的事件 jQuery事件是对JavaScript事件的封装,常用事件分类如下: 基础事件 window事件 鼠标事件 键盘事件 表单事件 复合事件是多个事件的组合 鼠标光标悬停 鼠标连续点击 鼠标事件 鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件,常用鼠标事件有: 以mouseover()为例,实现鼠标移过时特效: 键