1. 节点操作

createElement(标签名)                       创建一个指定名称的元素

someone.appendChild(new_node)               追加一个子节点(作为最后的子节点)

someone.insertBefore(new_node,指定节点)     把增加的节点放到指定节点的前边

removeChild()                               获取要删除的元素,通过父元素调用删除

someone.replaceChild(new_node,指定节点)     把指定节点替换成新节点

2. 节点属性操作

2.1 获取文本节点的值

innerText               获取一个标签的文本内容

innerHTML               获取一个标签的全部标签内容

例子:

<div id="c1"><p>hello</p></div>

<script>

	var ele=document.getElementById("c1");//通过id的方式获取元素

	console.log(ele.innerHTML);//打印元素的全部标签

	console.log(ele.innerText);//打印元素的字体

</script>

结果如下:

2.2 attribute操作

elementNode.setAttribute(name,value)        为一个元素设置属性及属性值

elementNode.getAttribute(属性名)            获得一个元素的属性值

elementNode.removeAttribute("属性名")       删除一个元素的指定属性

2.3 value获取当前选中的value值

input

select(selectedIndex)

textarea

2.4 innerHTML给节点添加html代码

tag.innerHTML="<p>添加的内容</p>"

2.5 关于class的操作

elementNode.className               获取一个元素节点的类名

elementNode.classList.add           为一个元素节点添加类属性

elementNode.classList.remove		删除一个元素节点中的类属性

例子:

<div class="item btn" id="d1">DIV</div>

<script>

	var ele=document.getElementById("d1");//通过id号获取元素

	console.log(ele.className);//打印元素的类名

	ele.classList.add("div1");//为元素的类添加一个"div1"属性

	console.log(ele.className);//打印元素的类名

	ele.classList.remove("item");//删除元素的"item"属性

	console.log(ele.className);//打印元素的类名

</script>

结果如下:

2.6 改变css的样式

<p id="p2">hello world</p>

document.getElementById("p2").style.color="red";//把p标签的颜色设置成红色

document.getElementById("p2").style.fontsize=20px;//把p标签的字体大小设置为20像素

例子:

<p>1111</p>

<p>2222</p>

<p>3333</p>

<p>4444</p>

<p>5555</p>

<script>

	//通过标签名获取元素集合

	var p_eles=document.getElementsByTagName("p");

	//通过for循环遍历元素集合中的每一个元素

	for (var i=0;i <p_eles.length;i++){

		//为每一个元素绑定点击事件

		p_eles[i].onclick=function (){

			this.style.color="red";//使标签颜色为成红色

		}

	}

</script>

浏览器页面的5个p标签,点击每个标签后,标签的字体颜色变成红色

3. DOM event(事件)

event对象: event对象代表事件的状态,比如事件在其中发生的元素,键盘按键的状态,鼠标的位置,鼠标按钮的状态

事件通常与函数结合使用,函数不会在事件发生前被执行,event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数,开发者仅仅需要接收一下即可.

事件类型:

onclick             当用户点击某个对象时调用的事件

ondbclick           当用户双击某个对象时调用的事件

onfocus             元素获得焦点,即鼠标移动到该元素时触发的事件

onblur              元素失去焦点,即鼠标移出该元素时触发的事件

onchange            文本域的内容被改变,使用在input文本输入框中

onkeydown           键盘的某个键被按下

onkeypress          键盘的某个键被按下并松开

onkeyup             键盘的某个键被松开

onload              只用于body元素,这个属性的触发标志着页面内容被加载完成

onmousedown         鼠标按钮被按下

onmousemove         鼠标被移动

onmouseout          鼠标从某个元素移开

onmouseover         鼠标移到某个元素之上

onmouseleave        鼠标从元素离开

onselect			文本被选中

onsubmit			当表单在提交是触发,只能给form元素使用

例子一:绑定提交事件

<form action="" id="form">

	<p>姓名<input type="text"></p>

	<p>密码<input type="password"></p>

	<input type="submit">

</form>

<script>

	//通过id号获取元素

	var ele=document.getElementById("form");

	//提交按钮被点击

	ele.onsubmit=function(e){

		alert("1234");//弹出对话框

	}

</script>

例子二:绑定窗口加载完成事件

<script>

	//为窗口绑定加载完成函数

	window.onload=function(){

		//获取元素

		var ele=document.getElementById("c1");

		//把元素的字符颜色变成红色

		ele.style.color="red";

	}

</script>

<body>

<div id="c1">div</div>

</body>

例子三:绑定键盘按下松开事件

<input type="text" id="user">

<script>

	var ele=document.getElementById("user");

	ele.onkeydown=function(e){

		e=e||window.event;

		//键盘输入的字符对应ASCII码中对应小写字母的ASCII码

		console.log(String.fromCharCode(e.keyCode));

		console.log(e.keyCode);//按下键盘上的某个键时,对应文本字符的ASCII码中的小写字母

	}

</script>

打印结果:

例子四:悬浮下拉菜单

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title></title>

	<style type="text/css">

		.container {

			width: 300px;

		}

		.title {

			background-color: gray;

			line-height: 44px;

			text-align: center;

		}

		.list {

			display: none;

		}

		.list div {

			line-height: 40px;

		}

		.item1 {

			background-color: green;

		}

		.item2 {

			background-color: goldenrod;

		}

		.item3 {

			background-color: rebeccapurple;

		}

		.item4 {

			background-color: pink;

		}

	</style>

</head>

<div class="container">

	<div class="title">text</div>

	<div class="list">

		<div class="item1">1111</div>

		<div class="item2">2222</div>

		<div class="item3">3333</div>

		<div class="item4">4444</div>

	</div>

</div>

<script>

	var ele = document.getElementsByClassName("title")[0];//获取class类集合的第一个元素

	var ele_list = document.getElementsByClassName("list")[0];//获取list类集合的第一个元素

	var ele_box = document.getElementsByClassName("container")[0];//获取container类集合的第一个元素

	//绑定鼠标悬浮事件

	ele.onmouseover = function () {

		ele_list.style.display = "block";

	};

	//绑定鼠标离开事件

	ele_box.onmouseleave = function () {

		ele_list.style.display = "none";

	}

</script>

<body>

</body>

</html>

4. 事件的绑定方式

4.1 方式1

代码:

//在标签的属性中绑定点击事件

<div id="div1" onclick="func()">div</div>

<script>

	function func(self){

		alert("12345")

	}

</script>

4.2 方式2

代码:

<p id="div1">div1</p>

<script>

	var ele1=document.getElementById("div1");//通过id名获取标签

	//为上面获取的标签绑定点击事件

	ele.onclick=function(){

		console.log("ok")

	};

</script>

节点操作,节点属性的操作及DOM event事件的更多相关文章

  1. JavaScript学习 - 基础(七) - DOM event(事件)

    DOM event(事件) 定义事件: // 定义事件: //方式一,直接在标签上定义事件 // 方式二: var a11 = document.getElementsByName('a11')[0] ...

  2. DOM节点常见的属性及操作

    (1)常见节点属性 childNodes      子节点 nodeList children      子节点(元素节点) HTMLCollection parentNode       父节点 p ...

  3. BOM DOM Event事件笔记....

    js//获取文件标题 document.body //body document.title //网页标题 document.doctype//文档对象 document.url//路径 //服务器相 ...

  4. Dom的样式操作和属性操作

    如果说web的研究对象是html和css,那么整个dom结构,包含html树和dom树的dom结构才是研究对象,而在整个页面呈现上面,js起到的作用则是异步的用户行为. 按照上面整个思路,获取dom元 ...

  5. BOM对象，math对象document对象的属性和操作和 事件的基本操作

    Math对象 //该对象中的属性方法 和数学有关. abs(x) 返回数的绝对值. exp(x) 返回 e 的指数. floor(x) 对数进行下舍入. log(x) 返回数的自然对数(底为e). m ...

  6. javascript系列之DOM(三)---事件

    原文:javascript系列之DOM(三)---事件 事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些交互时,事件也就发生了.点击某些内容,鼠标经过特定 ...

  7. JavaScript 基础(四) - HTML DOM Event

    HTML DOM Event(事件) HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript.下 ...

  8. [DOM Event Learning] Section 2 概念梳理 什么是事件 DOM Event

    [DOM Event Learning] Section 2 概念梳理 什么是事件 DOM Event   事件 事件(Event)是用来通知代码,一些有趣的事情发生了. 每一个Event都会被一个E ...

  9. webAPI(DOM) 2.1 获取页面元素 | 事件1 | 属性操作 | 节点 | 创建元素 | 事件2

    js分三个部分: ECMAScript标准:js的基本语法 DOM:Ducument Object Model--->文档对象模型--->操作页面的元素 BOM:Browser Objec ...

随机推荐

  1. cs231n spring 2017 lecture9 CNN Architectures 听课笔记

    参考<deeplearning.ai 卷积神经网络 Week 2 听课笔记>. 1. AlexNet(Krizhevsky et al. 2012),8层网络. 学会计算每一层的输出的sh ...

  2. cs231n spring 2017 lecture1 Introduction to Convolutional Neural Networks for Visual Recognition 听课笔记

    1. 生物学家做实验发现脑皮层对简单的结构比如角.边有反应,而通过复杂的神经元传递,这些简单的结构最终帮助生物体有了更复杂的视觉系统.1970年David Marr提出的视觉处理流程遵循这样的原则,拿 ...

  3. SRM13

    由于种种原因,好像出了点锅……? 好在问题不是很大. 得分比我估的要低啊. 木之本樱 计算几何送分题 就是叫你求一共有多少组四线共点,O(n^4)暴力可以过初.枚举两条线,求出交点之后求有多少条直线过 ...

  4. UVA11039-Building designing

    Building designing Time limit: 3.000 seconds An architect wants to design a very high building. The ...

  5. BZOJ-USACO被虐记

    bzoj上的usaco题目还是很好的(我被虐的很惨. 有必要总结整理一下. 1592: [Usaco2008 Feb]Making the Grade 路面修整 一开始没有想到离散化.然后离散化之后就 ...

  6. git学习四：eclipse使用git提交项目

    支持原创:http://blog.csdn.net/u014079773/article/details/51595127 准备工作: 目的:eclipse使用git提交本地项目,提交至远程githu ...

  7. TCP为什么需要3次握手与4次挥手(转载)

    为什么需要“三次握手” 在谢希仁著<计算机网络>第四版中讲“三次握手”的目的是“为了防止已失效的连接请求报文段突然又传送到了服务端,因而产生错误”.在另一部经典的<计算机网络> ...

  8. html button 点击链接

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. JavaScript八张思维导图

    JS基本概念 JS操作符 JS基本语句 JS数组用法 Date用法 JS字符串用法 JS编程风格 JS编程实践 不知不觉做前端已经五年多了,无论是从最初的jQuery还是现在火热的Angular,Vu ...

  10. dedecms幻灯片调用图片模糊的解决办法

    dedecms幻灯片调用的是缩略图,如果图片尺寸比例和幻灯片的大小相差太大的话,图片就会自动拉伸模糊,比较影响美观和用户体验,下面就有常用的2个方法来解决这个图片模糊的问题. 第一种:手动制图 我们用 ...