pink老师js自学笔记03-DOM

一、getElementByID()

• 根据id获取
• 参数必须是字符串
• 返回的是一个元素对象

  	var timer = document.getElementById('time')
    console.log(timer);
    console.log(typeof timer); //object
    // console.dir()  打印我们返回的元素对象，更好的查看里面的属性和方法
    console.dir(timer);

二、getElementsByTagName()

• 根据标签名获取，返回带有标签名的返回的集合，返回的是元素对象的集合，咦伪数组的形式存在
• 如果页面中只有一个元素，返回的也是伪数组
• 如果页面中没有元素，返回的是空的伪数组
• element.getElementsByTagName(‘标签名’) element是父元素 父元素必须是指定的单个元素

 	var lis =  document.getElementsByTagName('li');
    console.log(lis);
    // 2.我们想要一次打印里面的元素可以采取遍历的方式
    for (var i = 0; i < lis.length; i++) {
      console.log(lis[i]);
    }
     // var ol = document.getElementsByTagName('ol'); //父元素是个集合[]
    // console.log(ol[0].getElementsByTagName('li')); //父元素指定单个元素才可以运用这个方法
     var ol = document.getElementById('ol');
    console.log(ol.getElementsByTagName('li'));

三、HTML5新增的获取元素方式

1. 根据类名返回元素对象集合 document.getElementsByClassName(‘类名’) -

	var boxs = document.getElementsByClassName('box');
    console.log(boxs);

2. 根据指定选择器返回第一个元素对象 document.querySelector(‘选择器’);
   • 切记！querySelector返回的是第一个元素，并且括号里类要加. 例如.box id要加# 例如#nav

	//类选择器
 	var box1 = document.querySelector('.box')
 	//ID选择器
    var nav = document.querySelector('#nav');
 	//l的第一个元素
    var li = document.querySelector('li');

四、获取特殊元素

1. 获取 body 元素

	var bodyEle = document.body;

2. 获取 HTML 元素

	var htmlEle = document.documentElement;

五、事件的三要素

• 事件源：事件被触发的对象
• 事件类型：如何触发 什么时间 比如鼠标点击（onclick）
• 事件的处理程序 通过一个函数赋值的方式 完成

 var btn = document.getElementById('btn');
    btn.onclick = function(){
      alert('秋香~~~')
    }

六、操作元素

1. innerHTML 和 innerText

区别：
1、innerText 不识别HTML标签，去除空格和换行
2、innerHTML 是W3C的标准，保留空格和换行

	  <div></div>
	  <p>
	         我是文字
	    <span>123</span>
	  </p>
	  <script>
	    // innerText 和 innerHTML的区别
	    // 1.innerText  不识别HTML标签   去除空格和换行
	    var div = document.querySelector('div');
	    // div.innerText='你今天真不错'; 页面上显示就是普通的文字
	    // 2.innerHTML  w3c标准  保留空格和换行
	    
	    div.innerHTML='<strong>你今天真不错</strong>';
	    //页面上显示加粗的文字
	    
		// 这两个属性可读写，可以获取元素里面的内容  
		var p = document.querySelector('p');
		console.log(p.innerText); //不包含标签 我是文字 123
		console.log(p.innerHTML); 
		//包含标签:  我是文字  <span>123</span>

2. 操作元素的修改元素
   可以使用 元素.属性 进行修改

  <button id="wlh">王力宏</button>
  <button id="mk">玛卡巴卡</button><br>
  <img src="img/wqf.jpg" alt="" title="吴青峰">
  <script>
    var gre = document.getElementById('wqf');
    var dw = document.getElementById('mk');
	var pic = document.querySelector('img');
 // 2.注册事件
    wqf.onclick = function(){
      pic.src = 'img/wlh.jpg';
      pic.title='王力宏';
    }
    dw.onclick = function(){
      pic.src = 'img/mkbk.jpg';
      pic.title='玛卡巴卡';
    }
这个例子就是给按钮点击谁，img里就会放置谁的图片

3. 表单元素

 <button>按钮</button>
  <input type="text" value="请输入内容">
  <script>
    // 1.获取元素
    var btn = document.querySelector('button');
    var input = document.querySelector('input');
    // 2.注册事件，处理程序
    btn.onclick = function(){
      input.value = '你点啥点？'; //表单的值
      // 按钮禁用
      // btn.disabled = true;
      this.disabled = true;
      // this指向的是事件函数的调用者 此处为btn
    }
  </script>

4. 修改样式属性
   div.style 行内样式，里面的属性采取驼峰命名法

例1：
// 1.获取元素
    var div = document.querySelector('div');
    // 2.注册事件，处理程序
    div.onclick=function(){
      // div.style  行内样式  里面的属性采取驼峰命名法
      this.style.backgroundColor = 'purple';  //背景色变为紫色
      this.style.width = '250px';
    }
例2：
btn.onclick = function(){
      box.style.display ='none'; //盒子隐藏
    }

5. 通过className改变元素的样式

 <div class="first">文本</div>
  // 1.element.style 获得修改元素样式，如果样式多，就很复杂
    var test = document.querySelector('div');
    test.onclick = function(){
      // 2，element.className 让当前元素的类名改为change这个类
      // this.className = 'change';
      // 3.如果想要保留原先的类名，我们可以这样写
      this.className = 'first change'; //前面写原先的类名，空格加更改的类名
    }

七、自定义属性

1. 获取元素的属性值
   (1)element.属性 获取内置属性值(元素本身自带的属性)；
   (2)element.getAttribute(‘属性’) 得到属性的意思 主要获得自定义属性

2. 设置元素的属性值
   (1)element.元素属性 = ‘值’；
   (2)element.setAttribute(‘属性’，‘值’)

3. 移除元素的属性
   移除属性 removeAttribute(‘属性’)

4. HTML5的自定义属性 (获取)

   • element.dataset.属性
     // // dataset是一个集合里面存放了所有data开头的自定义属性
     // 如果自定义属性里有多个用-连接的单词，我们获取的时候采取驼峰命名法

 	<div id="demo" index="1" class="nav"></div>
 	 <script>
    var div = document.querySelector('div');
    // 1.获取元素的属性值
    // (1)element.属性 获取内置属性值(元素本身自带的属性)
    console.log(div.id);  //demo
    // (2)element.getAttribute('属性')  得到属性的意思
    // 主要获得自定义的属性
    console.log(div.getAttribute('id'));  //demo
    console.log(div.getAttribute('index'));  //1

    // 设置元素的属性值
    // (1)element.元素属性 = '值'
    div.id = 'test'
    div.className = 'navs'
    // (2)element.setAttribute('属性'，'值')
    div.setAttribute('index',2); 
    div.setAttribute('class','navv');  //class特殊 这里写的就是class
   
    // 移除属性 removeAttribute('属性')
    div.removeAttribute('index')
  </script>

八、节点的操作

节点至少拥有nodeType、nodeName、nodeValue
nodeType：元素节点为1 属性节点为2 文本节点(文字。空格。换行)为3
利用节点获取元素更简单一些

1. 父节点 parentNode
2. 子节点 childNodes

	<div>我是div</div>
	  <span>我是span</span>
	  <ul>
	    <li>我是li</li>
	    <li>我是li</li>
	    <li>1</li>
	    <li>1</li>
	  </ul>
	  <div class="box">
	    <span class="ewm">x</span>
	  </div>
   // 1.父节点 parentNode
    var ewm = document.querySelector('.ewm');
    // 得到的是离元素最近的父级节点
    ewm.parentNode;  //得到的就是box

    // 子节点 childNodes
    // 利用DOM提供的方法（API）获取ul中的li
    var ul = document.querySelector('ul');
    var lis = document.querySelectorAll('li');
    // childNodes包含所有的子节点，包含元素节点，文本节点等
    console.log(ul.childNodes)
    // 2.child 得到子元素节点
    console.log(ul.child); //只得到ul下的li

3. 子节点

• 第一个子元素 firstChild 包括文本节点以及元素节点
• 子节点的最后一个子元素 lastChild

4. 子元素节点

• 返回第一个子元素节点 firstElementChild
• 返回最后一个子元素节点 lastElementChild

5. 实际开发的写法

• 第一个子元素 ol.children[0]
• 最后一个子元素 ol.children[ol.children.length -1]

  <ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ol>
  <script>
    var ol = document.querySelector('ol');
    // 1.firstChild 第一个子节点 包括文本节点以及元素节点
    console.log(ol.firstChild);  //#text
    console.log(ol.lastChild); //#text
    // 2.子元素节点
    //firstElementChild 返回第一个子元素节点
    console.log(ol.firstElementChild); //li
    console.log(ol.lastElementChild); //li
    // 3.实际开发的写法
    console.log(ol.children[0]); //第一个子元素
    console.log(ol.children[ol.children.length - 1]);  //最后一个子元素

6. 兄弟节点

• 下一个兄弟节点 nextSibling 包含元素节点或者文本节点等
• 上一个兄弟节点 previousSibling

7. 兄弟元素节点

• 下一个兄弟元素节点 nextElementSibling
• 上一个兄弟元素节点 previousElementSibling

8. 没有兼容性获得兄弟元素节点的方法 可以封装一个

	function getNextElementSibling(element){
      var el = element;
      while (el = el.nextSibling) {
        if (el.nodeType === 1) { //元素节点为1
          return el;
        }
      }
      return null;
    }

9. 创建节点 document.createElement(‘tagName’);

10. 添加节点 node.appendChild(child) 创建后添加才能看到 node父级 child子级

11. 在某个元素的前面插入子元素 node.insertBefore(child,指定元素)
    想在页面添加一个新的元素：（1）.创建元素（2）添加元素

12. 删除元素节点 node.removeChild(child);

13. 复制节点

• 浅拷贝 node.cloneNode(); 括号为空或为false 浅拷贝 只复制标签不复制里面内容
• 深拷贝 node.cloneNode(true); 括号里为true 深拷贝 复制标签以及里面的内容

12. 创建元素的方法

• document.write() 是直接将内容写入页面的内容流，但是文档流执行完毕，它会导致页面重绘
• innerHTML 创建多个元素效率会更高（采用数组形式）
• document.createElement 创建多个元素时，效率稍微低，但是结构很清晰

总结内容

文档对象模型，document object model 简称DOM
是W3C组织推荐的处理可扩展标记语言（HTML,XML）的标准程序借口
通过DOM可以改变网页的内容、结构、样式

1.DOM树
文档：有个页面就是一个文档，在DOM中用document表示
元素：页面中所有的标签都是元素，在DOM中用element表示
节点：网页中所有的内容都是节点（标签，属性，文本，注释等），DOM中使用node表示
DOM把以上内容都看做是对象

2.DOM的重点核心
针对元素的操作，主要有增。删、改、查、属性操作、时间操作
（1）创建

• document.write
• innerHTML
• createElement

(2)增

• appendChild 在后面新增
• insertBefore 在前面新增

(3)删

• removeChild

(4)改
主要修改dom的元素属性，dom元素的内容、属性、表单的值等

• 修改元素属性：src,href,title等
• 修改普通元素内容：innerHTML，innerText
• 修改表单元素：value(值),type,disabled等
• 修改元素样式：style，className

(5)查
主要获取查询dom的元素

• DOM提供的API方法：getElementById，getElementsByTagName
• H5提供的新方法：querySelector，querySelectorAll
• 利用节点操作获取元素：父 parentNode，子children，
  兄 previousElementSibling、nextElementSibling

(6)属性操作

• setAttribute：设置dom属性的值
• getAttribute:得到dom的属性值
• removeAttribute:移除属性

(7)事件操作

给元素注册事件，采取事件源.事件类型 = 事件处理程序

(8)获取标签名

tagName 属性返回元素的标签名。HTML 返回 tagName 属性的值是大写的。 element.tagName