DOM 页面元素操作
DOM(document object model) 概念:
文档:document,一个页面就是一个文档。也是页面的对象
节点:页面的所有内容。包括元素节点、文本节点、属性节点、(文档节点、注释节点)
元素:页面的所有标签。
DOM的初步认识
获取元素节点5种方式
1。通过 ID .getElementById 直接设置 属性
例子:<img src="" height="" id="im"> document.getElementById("im").src="images/girl.jpg";
2。通过标签 .getElementsByTagName("标签名") 返回的都是一个 伪数组。可以用for循环遍历
类名 .getElementsClassName ("类名")
.getElementsName ("属性名")
例子:var arr = document.getElementsByTagName("div");
for( var i= 0; i<arr.length;i++){ arr[i].innerHTML = "我是div"}
在行内的属性可以直接通过.value.
3。通过CSS选择器 .querySelector(" 选择器名字") ID选择器 返回一个节点。多个时返回第一个,没有返回null
其余(类标签属性等)选择器返回一个数组 *IE8不支持
4. 如果想要为元素设置 自定义属性,使用 .setAttribute(属性名, 属性值); //设置多个循环
获取 自定义属性值使用 . getAttribute(属性名);
移除任意属性 .removeAttribute( 属性名); // 若设置 .className = " " ; 值没有但属性名还在。
5。成对的标签,设置中间文本内容时,使用 .innerText
或 .textContent
属性
但是有问题:.innerText是IE浏览器的标准输入,谷歌火狐IE都支持,然而低版本的火狐不支持
.textContent是火狐浏览器的标准输入,在IE8中是不支持的(结果是undefined)
例子:<p id="ss"><p> document.getElementById("ss").innerText = "hello";
6。在某个元素的事件中,自己的事件中的 this 就是当前元素的对象(自己)
例子:<input type="button" value="按钮" id="btn">
var obj = document.getElementById("btn");
obj.onclick = function (){ this.value="我是按钮"}
;
7。鼠标的排他功能思路。:hover / :active
例子:鼠标点击某一个时按钮颜色有白色变成绿色
经过的步骤 1.把所有的默认颜色设置为默认的(白色) 2.然后把要放上的按钮(this对象)颜色变为绿
8。在表单标签中,当属性的值只有一个,并且这个值是它本身,那么写js代码 DOM操作时,这个属性的值 是布尔类型就可以了 (如checked="checked"
表示为非空字符串,双引号里输入任意数据都能实现选中功能)
checked="checked"
/ multiple="multiple" / selected = "selected" / disabled="disabled"(文本禁用)
9。阻止超链接的默认跳转?为元素事件的函数设置 return false
;
例子:<a href="http://www.baidu.com" onclick=" alert( '我不跳'); return false">
10。一个很好的小想法。如果想给盒子加边框,不用box-sizing 约束。可以给所有盒子预先加上边框,颜色为背景色。当需要时修改颜色即可。
//鼠标的排他思想
<head>
<style>
input{
background-color: #c73636;
color: #fff;
border-style: none;
width: 40px;
height: 25px;
}
</style>
</head>
<body>
<input type="button" value="颜色">
<input type="button" value="颜色">
<input type="button" value="颜色">
<input type="button" value="颜色">
<input type="button" value="颜色">
<input type="button" value="颜色">
<script>
var arr = document.getElementsByTagName("input");
for(var i=0;i<arr.length;i++){
arr[i].onclick = function (){
//步骤一,将所有的背景颜色设置为默认色;
for(var j=0;j<arr.length;j++){
arr[j].style.backgroundColor="#c73636";
}
//步骤二 当前点击的对象的背景颜色变绿色
this.style.backgroundColor ="#0f0";
}
}
</script>
</body>
//属性值唯一时,设置为布尔值
<input type="radio" value="male" name="sex" id="">男
<input type="radio" value="female" name="sex" id="">女
<input type="radio" value="secret" name="sex" id="rad3">保密
<input type="button" value="点击按钮默认选中保密" id="set">
<script>
function my$(id){
return document.getElementById(id);
}
my$("set").onclick = function() {
my$("rad3").checked= true;
};
</script>
常用的触发事件:
1。鼠标的点击事件: .onclick
2。鼠标的移入移出事件: .onmouseover .onmouseout
3
。光标聚焦 失焦事件: .onfocus .onblur
4。文本框内容选中改变事件: .onselect .onchange
5。网页加载完毕关闭事件: .onload .onunload
6。键盘抬起 按下事件: .onkeyup .onkeydown
例子:dsgdgviregjrh
例子:dsgdgviregjrh
例子:dsgdgviregjr
innerText 与 innerHTML 区别:
设置标签内容:
innerText用来设置文本内容,设置标签无效。
innerHTML可以设置文本内容,也可以设置标签
获取标签内容:
innerText可以获取标签中间的文本内容,但是标签中如果还有标签,那么最里面的标签的文本内容也能获取.
innerHTML可以获取标签中间的所有内容,包括标签
//如果想要(获取)标签及内容,使用innerHTML
//如果想要设置标签,使用innerHTML
//如果想要设置文本,用innerText,或者innerHTML,或者textCont
DOM节点
.nodeType (节点类型) ===》 1是 标签 2 是属性 3 是文本
.nodeName (节点名字) ===》 大写的标签名 小写的属性名 #text
.nodeValue (节点值) ===》 null 属性的值 文本内容
节点的关系(元素单纯指标签
):
父节点:parentNode
父元素:parentElement
子节点:childNodes
子元素:children
第一个/最后一个子节点:firstChild
/ lastChild
第一个/最后一个子元素:firstElementChild
/ lastElementChild
之前/之后的兄弟节点:previousSibling
/ nextSibling
之前之后的兄弟元素:previousElementSibling
/ nextElementSibling
元素的根元素:ownerDocument
注意:凡是获取节点的代码在谷歌和火狐得到的都是相关的 节点 ,凡是获取元素的代码在谷歌和火狐得到的都是相关的 元素。
从前四个后,凡是获取节点的代码在IE8中得到的是元素,获取元素的相关代码,在IE8中得到的是undefined----元素的代码,IE中不支持
节点操作:除了创建节点,所有操作都是要找到 元素的父节点 parentNode 才行。
document .createElement() 创建元素节点
.createTextNode() 创建文本节点
parentElemnt
.appendChild() 把新建的节点插入到某个节点的子节点后面
.insertBefore(newElement , targetElement
) 在已有节点前插入一个新节点
.removeChild() 删除一个节点。成功返回删除的节点,失败返回null。
. replaceChild(newNode,oldNode)
获取body document.body
获取标题 doucment.title
获取html document.documentElement
DOM创建元素的三种方式:
一、document.write("<span> hello </span>")
缺点:在页面加载完毕后,通过这种方式创建元素,会重写页面。
二、 .innerHTML("<span> 我是.innerHTML </span>")
三、 a.创建元素节点 var par = document.getElementById(" parent") ;
b.追加到其父级元素节点后 var ele = doucument.createElement("span");
还可以继续创建文本节点(createTextNode),追加到元素后 par .appenChild( ele );
为元素绑定事件的三种方式:
一、对象. 事件 document .getElementById(" btn") . onclick = function () { console.log("我只能绑定一个事件") ; }
缺点:只能绑定一个事件
二、 调用 对象.addEventListener( 事件类型名 , 函数 ,false)方法 *IE8不支持
document .getElementById(" btn").addEventListener("click", function (){
console.log("我是一个事件");
}, false);
优点:可为同一个元素添加多个同类型事件
三、 调用 对象 .attachEvent( (on)事件类型 ,函数)方法 *谷歌火狐不支持
document .getElementById(" btn") .attachEvent(" onclick" , fn );
addEventListener()与 attachEvent()区别
相同点:都可以为元素绑定多个事件
不同点:
1.方法名不一样。
2.参数个数不一样 。 addEventListener三个参数,attachEvent两个参数
3. addEventListener谷歌, 火狐,IE11支持,IE8不支持 attachEvent 谷歌火狐不支持,IE11不支持,IE8支持
4. this不同,addEventL istener中的this是当前绑定事件的对象 attachEvent中的this是window
5. addEventListener中事件的类型(事件的名字)没有on attachEvent中的事件的类型(事件的名字)有on
为事件解绑:
用什么方式绑定事件,就应该用对应的方式解绑事件
一、对象.on事件类型名=null;
document .getElementById(" btn") . onclick =null;
二、对象. removeEventlistener("没有on的事件类型名",函数名字,false);
三、对象. detachEvent("on事件类型名",函数名字);
注意: 如果是要解绑事件,那么事件的处理函数要用命名函数 。因为匿名函数会把当成两个不同的函数。
//为任意元素绑定任意事件
function addEvent(element, type ,fn) {
if(element.addEventListener){ //1.判断浏览器支不支持addEventListener这个方法。
element.addEventListener(type, fn ,false); //addEventListener方法的事件名不用加on
}else if(element.attachEvent){ //不行,换attachEvent方法。
element.attachEvent("on"+type ,fn);
}else{
element["on"+type] = fn;
}
}
//为事件解绑
function removeEvent(element , type ,fnName){
if(element.removeEventListener){
element.removeEventListener(type ,fnName,false);
}else if(element.detachEvent){
element.detachEvent("on"+type ,fnName);
}else{
element["on"+type]=null;
}
}
事件冒泡:
有多个元素嵌套,有层次关系,这些元素都绑定了相同的事件,如果里面的元素的事件触发了,外面的元素自动触发该事件。
事件委托是利用事件的冒泡原理来实现的,何为事件冒泡呢?就是事件从最深的节点开始,然后逐步向外传播事件,假如页面上有这么一个节点树,div>ul>li>a;如果给a和div注册了点击事件,里面的 a执行点击事件的时候,那么这个事件就会一层一层的往外执行,执行顺序a>li>ul>div。a点击事件冒泡到最外面的div点击事件,这就是事件委托,委托它们父级代为执行事件。指定父级委托事件 去处理程序,用来管理某一类型的所有事件。
在使用 addEventlistener ("没有on的事件类型名",事件处理函数,控制事件阶段) 方法为元素绑定事件后,在事件触发的过程 可能会出现事件冒泡的效果,为了阻止 事件冒泡 有两个方式:
1、 window. event. cancelBubble=true; 火狐不支持
2、 e.stopPropagation(); ie8 不支持
注意:window. event和e都是事件参数对象,一个是IE的标准,一个是火狐的标准。由于事件参数e在IE8的浏览器中是不存在的 所以用window. event来代替。//可以直接输出这个对象
addEventListener中第三个参数是控制事件阶段的,事件的阶段有三个:
1----->事件捕获阶段 :从外到里 。
2----->事件目标阶段 :最开始选择的那个
3----->事件冒泡阶段: 从里朝外
通过 e. evenPhase 这个属性可以查看当前的事件在那个阶段。
*冒泡阶段与捕获阶段不会同时存在的,参数值为false 表示冒泡阶段 ,true表示捕获阶段。一般默认都是冒泡阶段,很少用捕获阶段。
//事件冒泡 元素嵌套示例
<div id="div1">
<div id="div2">
<div id="div3">
</div>
</div>
</div>
一、嵌套使用单双引号问题解决:
1. 里面内容纯字符串时,内双外单 、内单外双。
例:document.getElementById("td").innerHTML = " <img src=" image/ girl.jpg" alt =' sorry '> ";
2.里面 有变量时,内双外双,内单外单
str += "<li>"+arr[i] +" </ li>";
二、什么时候用命名函数/ 匿名函数?
如果是循环的方式添加事件,用命名函数比较节省空间
如果不是循环的方式,用匿名函数
三、误写js代码时,放在head头部出错;
原因:页面加载是 从上到下执行代码,执行函数时获取不到按钮, 页面加载完毕 后按钮才能点击,才能获取到id.
解决: 1. js代码放到后面 推荐
2.放到 window.onload 里边