Web_java script_Dom基础部分

01.JS的DOM概述

JavaScript分成三部分

1. ECMAScript js语法基础
2. DOM：Document Objet Mode(文档对象模型)，我们把html和css还有js构成的html文件，看成一个文档，把这个文档看做一个对象封装到内存中，就是我们DOM要学习的内容。
   在DOM中，最顶级的对象就是document对象，这个对象不用我们j创建。js内置对象，已经创建好了，直接拿来用就行。
   通俗理解：document对象就是当前html的祖宗对象。DOM会把整个页面封装成一个DOM树状结构 到内存当中。讲DOM的前提就是js的事件，因为js是受事件驱动的。
3. BOM: Browser Object Model(浏览器对象模型)：用js进行页面刷新… 页面关闭 …新建一个页面 浏览器收藏夹管理 等等功能。

02.js事件的使用

• dom: document(文档)
• js会把页面所有的标签封装成一个文档对象

js: 是受事件驱动的

• 事件: 在什么时间做什么事情

js离不开事件 要想学习dom操作 就要先学习事件

• 事件: 鼠标点击 鼠标离开 鼠标进入 获得焦点 失去焦点 右键点击

** js添加事件的步骤**

• 核心: 事件三要素: 事件源 事件名称 事件驱动函数(处理办法)

需求: 按钮点击 弹出框
事件源: 找到按钮
事件名称:系统提供好的各种事件 直接用就可以
事件处理办法: 一个函数 里面有代码 弹出框

  //第一步 找到按钮对象  沟通id找到页面元素   把页面标签变成了一个 js对象
    var btn=document.getElementById("btn");
//    console.log(btn);
    //第二步:给元素添加指定事件名称
    btn.onclick=function(){
        //第三步: 事件驱动函数
        alert("我被点疼了!!!!");
    }

03.DOM操作的概念

• 什么是DOM:(Document Object Model) 文档对象模型
• 表示js把页面所有的标签封装成文档对象 进行统一管理
• DOM操作就是通过js操作页面标签:
  增删改查 增加 删除 修改 查询(document.getElemntById())

查询:
获取元素的其他5种方式:

第一种:  document.getElementById(“id名”);

根据标签名获取标签对象 返回值是一个伪数组。伪数组:像一个数组 有数组的length，数组的角标操作，但是没有数组的那些常用函数。

第二种:	document.getElementsByTagName();

该方法 不论最后找到的是一个元素，0个元素，还是一堆元素 最后返回都是一个伪数组。
记住!!!伪数组没有办法 直接添加事件。

第三种:   document.getElementsByClassName(); 

通过类名找到指定元素对象
该方法 在IE8里面 报错：对象不支持“getElementsByClassName”属性或方法

第四种:	document.querySelector("选择器")

仿jQuery的选择器获取方法(H5同期推出的 所以***不兼容IE7-***）
该方法只能找到单个元素 如果选择器对应的是多个元素 则按第一个获取。

第五种:	document.querySelectorAll("选择器")

仿jQuery的选择器获取方法(H5同期推出的 所以不兼容IE7-)

04.this在js中的使用

在每一个事件函数里面默认都有一个this 指向事件调用者对象

05.a链接跳转问题

统一设置当前页面 所有a链接的跳转地址 和跳转目标的位置 target；
bug:

• a链接添加点击事件以后，点击会执行事件驱动函数，但问题是：本身a链接也会跳转。这样用户体验很不好 就算href写#也会置顶效果 很不好

解决:
1，a链接的点击事件的函数里面 最后一行写一个return false就可以了
2， a链接的href上面写上 javaScript:void(0)

 <a href="javaScript:void(0)">切换图片</a>

或者:

<a href="javaScript:;">切换图片</a> <br>

    // 1.找到a对象
    var a=document.getElementsByTagName("a")[0];
//    3.获取img对象
    var img=document.getElementsByTagName("img")[0];
    //2.添加点击事件
    a.onclick=function () {
        // 4.点击执行img切换src属性
        img.src="mm.jpg"
		return false;
    }

05.节点的概念以及节点的访问关系和兼容性写法

dom树中有元素和节点

• 元素就是页面标签
• 节点就是 元素中各部分内容

节点分类:

1. 元素节点--(<div>内容</div>)；
2. 文本节点--(回车换行文本 标签的内部文本 以及页面上不再标签内部的文字 直接在body里面写的文字)；
3. 属性节点--(<div id="qq">内容</dib>) id="qq"就是属性节点；

DOM节点的访问关系:
通过获取一个dom节点 从该节点出发 可以获取到任意一个跟当前节点有直接或者间接关系的节点。

节点访问关系中 都是属性调用

1.获取父节点: 没有兼容问题

ele.parentNode;

2.获取兄弟节点:

• 获取上一个兄弟节点

ele.previousSiblings
该方法 在谷歌/火狐/IE9+ 获取的上一个兄弟节点包含文本节点(回车换行)
在IE678里面 直接获取上一个兄弟元素节点

---

ele.previousElementSibling
该方法 在谷歌/火狐/IE9+ 获取上一个兄弟元素节点
在IE678中 返回undefined

var previous=ele.previousElementSibling||ele.previousSibling;

• 获取下一个兄弟节点

ele.nextSibling
在谷歌/火狐/IE9+ 获取的下一个兄弟节点包含文本节点(回车换行)
在IE678里面 直接获取下一个兄弟元素节点

---

ele.nextElementSibling
在谷歌/火狐/IE9+ 获取下一个兄弟元素节点
在IE678中 返回undefined

var next=ele.nextElementSibling || ele.nextSibling;

3.父节点调用:获取单个子节点

• 获取第一个子节点:

parentNode.firstChild;
在谷歌/火狐/IE9+ 获取第一个子节点(包含文本节点);
在IE678中 获取第一个元素子节点

---

parentNode.firstElementChild
在谷歌/火狐/IE9+ 获取第一个元素子节点
在IE678中 返回undefined

var first=parentNode.firstElementChild ||  parentNode.firstChild;

• 获取最后一个子节点:

parentNode.lastChild:
在谷歌/火狐/IE9+ 获取最后一个子节点(包含文本节点);
在IE678中 获取最后一个元素子节点

---

parentNode.lastElementChild:
在谷歌/火狐/IE9+ 获取最后一个元素子节点
在IE678中 返回undefined

var lastChild= parentNode.lastElementChild ||  parentNode.lastChild;

4.获取所有子节点:

父节点.childNodes; 返回NodeList数组(伪数组)  ----W3C亲儿子

在谷歌/火狐/IE9+ 获取所有子节点(包含文本节点)
在IE678直接获取所有的 元素子节点
但是实际开发一般我们都会使用下面这个 因为方便 还没有兼容问题

//虽然childNodes返回的所有子节点中包含文本节点 但是官方依然以这个为标准
//原因是  可以进行判断筛选  这个方法获取的内容是比较全的 不会丢东西
if(childNodesArr[i].nodeType==1){
	console.log(childNodesArr[i]);
}

 父节点.children 返回NodeList数组(伪数组)   ---非W3C标准

在谷歌/火狐/IE所有版本中 直接获取元素子节点，并没有兼容问题。
children在IE6/7/8中包含注释节点，在IE678中，注释节点不要写在里面。

父节点.children[index] 获取任意子节点

节点自己.parentNode.children[index] 获取任意兄弟节点

06.innerHTML和innerText的区别

innerHTML和innerText 都是可以对一个元素的内部内容进行设置和获取

• 如果元素.innerHTML/Text=具体值 表示设置；
• 如果console.log(元素.innerHTML/Text)表示获取并打印；

调用者都是父元素

设置:
相同点:
HTML/Text都会将父元素原本的所有内容覆盖成新内容。
如果设置的是一个普通的不带标签的字符串 那么两个结果一样；
不同点:
如果设置的字符串内容里面包含标签则出现了不同:

• innerHTML:
  会识别字符串中标签并渲染到页面显示出指定标签效果
• innerText:
  不会识别标签 只会把字符串原封不动的放到页面上

总结:
在设置的时候 innerHTML会识别标签，innerText不会识别标签。

获取:

• innerHTML:
  把当前元素里面的所有内容、回车换行、元素节点、文本内容全部获取，以字符串的形式返回。
• innerText:
  把当前元素的后代所有元素的内部文本和回车换行全都获取到,并不包含元素标签本身，只获取文本内容。

07.页面标签属性和对象属性

问题: box对象跟页面的那个id="box"的标签 之间到底什么关系?
分析:
box对象并不是我们new的一个对象；但是类型却又是object 我们又想到了语法糖 所以类型是object也不奇怪。
不是我们new的，但是的确却这个 对象 是一个引用类型 那么从哪里来的? 从DOM树中获取的
DOM树在内存中!!!
所以我们这个对象是DOM帮助我们new 的 而且存到了内存中。
我们只是从内存中 取出来用而已 其实我们getElementBy… 获取到的只是一个对象的地址。
标签的本质其实就是dom树中的一个对象。
所以:
box本质是内存中的一个对象；
div[id=“box”]是该对象的外在表现。
页面标签上面的 id/title属性 跟 对象.id/title属性 没有关系!!!

对象绑定任何属性 页面上都不会有体现 因为这是内存中完成的!!!
> 但是为什么某些属性页面标签会改变呢?
例如:> title/id/className/src/href/style
在改变对象的这些属性时 ，页面标签对应的属性节点的内容会发生改变，原因是因为 js这个货很好心的帮助我们修改了页面标签!!!

那么什么才是真正的操作页面标签的属性节点呢?(跟内存中的对象半毛钱关系都没有!!!)

元素对象.setAttribute("属性节点名字","属性节点值") 
给标签增加一个属性节点

 元素对象.getAttribute("属性节点名字") 
 获取标签的属性节点的值 根据属性节点名称

元素对象.removeAttribute("属性节点名字")
删除一个属性节点 根据属性节点的名称

08.dom操作表单的一些属性

表单input的一些dom操作
type=text:

• 获取内容 文本框对象.value
• 设置内容:文本框对象.value=“新内容”

焦点:
哪一个元素获取焦点 哪一个元素响应事件

//失去焦点事件
inp1.onblur=function () {
//获取文本框内容
	alert(this.value)
}

btn0.onclick=function () {
	//设置文本框内容
	inp1.value="我是新内容"
	//设置单选选中
	radioman.checked=true;
	//设置所有多选选中
	for(var i=0;i<cbs.length;i++){
		cbs[i].checked=true;
    }
}

btn1.onclick=function () {
	console.log(area.innerHTML);
 //获取单选是否被选中  true是选中
	console.log(radioman.checked);
//获取被选中的checkbox上面的内容
	for(var i=0;i<cbs.length;i++){
		if(cbs[i].checked){
			console.log(cbs[i].value)
	}
}

09.节点的nodeType和nodeName和nodeValue区别

1. 元素节点的获取 5种方式
2. 文本节点的获取 innerHTML innerText(返回字符串) 节点访问关系中的兼容问题去获取；
3. 属性节点的获取: 元素节点(带属性节点)对象.getAttributeNode(“属性名”)

节点对象都有三个属性 nodeType nodeName nodeValue

• nodeType:
  元素节点调用: 1
  文本节点调用: 3
  属性节点调用: 2

• nodeName:
  元素节点调用: 标签名大写!!!
  属性节点调用: 属性名字
  文本节点调用: #text

• nodeValue:
  元素节点调用: null
  属性节点调用: 属性值
  文本节点调用: 空字符串

10.js设置元素样式的几种方式

1.利用标签四大通用属性中的style属性(ps:这种设置样式只能是行内样式)
2.通过操作class的方式给元素增加样式
(1).元素对象.className= 有=号就是赋值 没有=号就是获取
(2)元素对象.setAttribute() —增加指定属性；
元素对象.removeAttribute() —移除指定属性；
元素对象.getAttribute() —获取指定属性值；
(3)元素对象.classList.add(); classList.remove()—>H5新推出的;
3.通过元素对象.style.cssText="样式字符串"属性 操作行内样式—>也是设置行内样式
ul.style.cssText=“font-size:50px;background-color:red;margin-left:50px;”;
操作的就是 标签上面style属性的值 直接设置行内样式，而且可以一次性设置多个。
4.尝试自己封装jQuery版本的css()方法

例如: ul.css({ “background-color”:“red”, “font-size”:“50px”,
“margin-top”:“60px” })

11.自己封装css方法

参数列表:

• 1.元素
• 2.json对象(键值对 css属性名:属性值)

function css(ele,json){
//        css.style.cssText=json;
//        var str="{\"name\":\"小强\"}";
//        JSON.parse(str);
        //第一步:讲json对象转换车json字符串
        var str=JSON.stringify(json);
//        console.log(str.slice(1,str.length-1));
//        第二步将json字符串的 大括号截取掉不要
        var str1=str.slice(1,str.length-1);
        //第三步 把逗号全都替换成分号
        var newStr=str1.replace(/,/g,";");    
//        console.log(newStr);
        //把里面所有的双引号替换成空
        newStr=newStr.replace(/"/g,"");
//        console.log(newStr);
        //第五步:  给元素的cssText赋值
        ele.style.cssText=newStr;
//        console.log(json);
}
function  show() {
	css(box,{
		"font-size":"60px",
		"color":"red",
		"background-color":"hotpink"
	});
}

12.js隐藏盒子的几种方式

占位:
1.box.style.position=“relative”;
box.style.left="-500px";
2. box.style.opacity=“0”;
3.box.style.visibility=“hidden”;
4.box.style.background=“transparent”; 背景透明
box.innerHTML="";

不占位:
1.box.style.position=“absolute/fixed”;
box.style.left="-500px";
2. box.style.width=0;
box.style.height=0;
3.box.style.display=“none”;
4.box.style.marginTop="-500px"; 同方向的 不占位 会带着后面元素一起走
box.style.marginLeft="-500px"; 不同方向的 则占位
5. box.style.float=“left”; 让当前元素不占位
box.style.marginLeft="-500px";

13.js获取css样式（只能获取行内式）

console.log(元素对象.style.属性名);
只能获取行内定义过的样式 如果该属性不是行内样式 则获取时返回空字符串；
只能获取行内样式的字符串；
console.log(“box的cssText:”+box.style.cssText);

14.js控制元素层级和定位

如果元素只是单纯的 浮动 那么层级不生效
box.style.zIndex=999;
pox.style.zIndex=1;
我们给元素都加入了 position:relative 就会生效了 注意是都加!!!

15.dom针对元素的增删改查

查询:
1.获取元素的五种方式
2.节点访问关系(获取父节点 获取所有子节点 第一个/最后一个子节点 上一个/下一个兄弟节点);
创建一个元素对象:
var new元素对象= document(只能是document调用).createElement("节点名称");
新创建出来的是一个内容为空的元素对象;
创建元素对象一般和拼接元素对象的方法 一起配合使用.
增加
父元素对象.appendChild(元素对象) 将该元素对象 拼接到父元素的最后一位。
父节点.insertBefore(新插入的节点对象,被参考的旧节点对象);
在被[参考的旧节点对象]之前插入[新插入的节点对象]
删除
父元素.removaChild(子元素对象);
修改(替换)
父元素.replaceChild(新元素对象,被替换的老元素对象)；
将其中一个旧子节点替换成新的子节点。
复制(克隆)
节点对象自己.cloneNode(boolean值(默认false))；
参数布尔值默认是false 表示 只克隆标签对象本身 不克隆内部内容；如果传入true 表示 克隆当前元素的所有后代元素。