前端JavaScript中DOM

最新推荐文章于 2024-08-14 15:45:18 发布

全栈JAVA学习

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量92

点赞数

文章标签： javascript html5 css

本文链接：https://blog.csdn.net/weixin_46763689/article/details/114987745

版权

CSS——DOM

DOM节点也是DOM对象（document objec management）
在这里插入图片描述

document节点属性

1、title 返回的是当前文档的标题
用法：document.title 可以赋值，从而修改文档的标题
2、location 返回的是文档的路径
用法：document.location.href 可以赋值，修改当前文档的路径

其他节点的属性

1、value属性返回当前值
元素.value 如获取input中输入的值
2、src属性返回图片的路径
元素.src=‘路径’

重点

一、选中页面元素

1、通过id后获取

	document.getElementById("IdName")

2、通过标签名获取元素，返回一个数组

   document.getElementByTagName("tagName")

3、通过class名字获取页面元素，返回一个数组

   document.getElementsByClassName("className")

4、通过CSS选择器去获取页面元素

  document.querySelector('css选择器')   获取符合条件的一个css选择器
  document.querySelectorAll('css选择器')      获取所有符合条件的css选择器

二、创建页面元素

1、创建元素

 createElement('元素名')方法通过指定名称创建一个元素

2、创建文本节点

 createTextNode('文本')可创建文本节点

3、创建属性

 createAttribute('属性名')

4、属性赋值

 属性.value='属性值'

5、设置属性节点

 元素.setAttributeNode(属性)

6、作为子节点追加到父节点中

 父节点.appendChild(子节点)
 当父节点为body时，document.body.appendChild

使用方法

（1）通过id获取h1
（2）创建div元素
（3）div作为子节点追加到body中
（4）创建文本节点：。。。。。
（5）文本节点作为子节点追加到div中
（6）创建属性
（7）属性赋值
（8）设置属性节点
要设计样式则在上面的方法上，加：
（9）创建style属性
（10）给style属性赋值
（11）设置属性节点

通过例子来了解使用方法：
先在body中加入h1并设置id为‘h’

    <h1 id="h"></h1>
    <script>
        // 通过id获取h1
        var h = document.getElementById('h');

        //创建div元素
        var div1=document.createElement('div');

        //div作为子节点追加到获取到的位置，div为子节点
        h.appendChild(div1);

        //创建文本节点：。。。。。
        var text=document.createTextNode("JS创建的文本div");

        //文本节点作为子节点追加到div中
        div1.appendChild(text);

        //创建属性
        var attr=document.createAttribute('title');

        //属性赋值
        attr.value='嘿嘿嘿';

        //设置属性节点
        div1.setAttributeNode(attr);

        // 创建style属性
        var style=document.createAttribute('style');

        //给style属性赋值
        style.value='width:200px;height:200px;background-color:red;';

        //设置属性节点
        div1.setAttributeNode(style);
    </script>

三、操作页面元素属性

1、元素节点的方法
（1）getAttribute方法

	getAttribute('属性名')
	//如果有属性 返回对应的属性值
	//如果没有属性 返回null

（2）setAttribute方法

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

（3）removeAttribute方法

	removeAttribute('属性名')

例子代码：

<!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>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            
        }
    </style>
</head>

<body>
    <div id="box" class="box" title="嘿嘿嘿">
        猴子
    </div>
    <script>
        //获取页面元素
        var box=document.getElementById('box');

        // // 判断是否有title和style属性
        console.log(box.getAttribute('title'));//嘿嘿嘿
        console.log(box.getAttribute('style'));//null

        // 设置属性
        box.setAttribute('style','border-radius:50%;line-height: 200px;');
        box.setAttribute('align','center');

        //删除属性
        box.removeAttribute('class');
    </script>
</body>
</html>

2、元素节点的style属性
元素.style.css属性=‘属性值’;
元素的style对象对应元素的style属性，style对象中的样式与元素style属性中的样式是一一对应的，但是需要一点点改写规则：

（1）将横杆从CSS属性中去除，然后将横杆后的第一个字母大写    例如：backgroundColor
（2）CSS属性名是JavaScript保留字，在属性名之间需要加上字符串"css"    例如：cssFloat
（3）style对象的属性都是字符串，而且包括单位

例如：

div.style.width="300px";
div.style.backgroundColor="300px";//在css中属性为background-color

当属性多的时候，上面所使用的的方法过多，可以改写为下面使用的：

div.style.cssText="width:300px;background-color:300px;"

删除整个style属性可以用：div.style.cssText="";

3、className属性
设置或者返回元素的class属性
用法：元素.className=classname

使用步骤：
（1）先获取元素，可以通过上面的getElementById、getElementByTagName等
（2）元素.className=‘设置class名’;

四、事件

HTML事件就是发生在HTML元素上的事件。事件多配合函数的使用。事件就是你的行为，让页面具有交互性，其事件名称都是on+行为。例如：鼠标点击、鼠标双击、鼠标悬停、鼠标离开等事件。

例子：
onclick鼠标点击事件：
1、直接加在HTML元素中，只要写在HTML中

	<button onclick="alert('点击');">点击</button>

2、调用JavaScript函数，写在js和HTML中

	<button onclick="fun();">点击</button>
	<script>
		function fun(){
    		alert('点击');
	 	}
	< /script>

3、可以为HTML元素指定自己事件的事件处理程序，写在js中

	<button id="btn">点击</button>
	<script>
	   //获取元素
	   var btn = document.getElementById("btn");
	   btn.onclick=function(){
	       alert('点击');
	   }
	< /script>

其他例子与上面例子相似：

onmousedown鼠标按下：

	box.onmousedown=function(){
	    alert('按下');
	}

与onclick的区别：
鼠标按下时，输出“按下”，当鼠标松开时，显示”点击“。说明onclick是按下松开后触发的事件

onmouseup鼠标释放：

	box.onmouseup =function(){
	    alert('释放');
	}

当onclick、onmousedown、onmouseup三个事件一起，
输出的先后顺序为： “按下”——>“释放”——>“点击”

onmousemove鼠标移动：鼠标移动1px就触发一次该事件

	box.onmousemove =function(){
	    alert('移动');
	}

onmouseenter鼠标移入：不支持冒泡（box的子元素不可以触发）

	box.onmouseenter =function(){
	    alert('移入');
	}

onmouseleave鼠标移出：不支持冒泡（box的子元素不可以触发）

	box.onmouseleave =function(){
	    alert('移出');
	}

onmouseover鼠标移入：支持冒泡（box的子元素也继承该事件，可以触发该事件）

	box.onmouseover =function(){
	    alert('移入');
	}

onmouseout鼠标移出：支持冒泡（box的子元素也继承该事件，可以触发该事件）

	box.onmouseout =function(){
	    alert('移出');
	}

全栈JAVA学习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端JavaScript中DOM

CSS——DOMDOM节点也是DOM对象（document objec management）document节点属性1、title 返回的是当前文档的标题用法：document.title 可以赋值，从而修改文档的标题2、location 返回的是文档的路径用法：document.location.href 可以赋值，修改当前文档的路径其他节点的属性1、value属性返回当前值元素.value 如获取input中输入的值2、src属性返回图片
复制链接

扫一扫