zoukankan      html  css  js  c++  java

  • JavaScript-11(DOM文档对象模型)

    一、节点

    1.节点分类

    • document ： 文档节点 nodeType 9
    • element ：元素节点 nodeType 1
    • attr ： 属性节点 nodeType 2
    • text ： 文本节点 nodeType 3
    • comment ： 注释节点 nodeType 8

    2.节点属性

    • nodeName 节点名字 元素的nodeName是标签名
      • document : #document
      • element : 标签名
      • attr : 属性名
      • text : #text
      • comment : #comment
    • nodeValue 节点值
      • document : null
      • element : null
      • attr : 属性值
      • text : 文本内容
      • comment : 注释内容
    • nodeType 节点类型

      • document : 9

      • element : 1

      • attr : 2

      • text : 3

      • coment : 8

          <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>节点 node</title>
  </head>
  <body>
  <!-- 哈哈哈 我是注释 -->
  <img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1505/01/c12/6225095_1430488604728.jpg" width="300" alt="" id="myImg">

  <p id="myP">
  	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem praesentium a, ipsum iste labore libero reprehenderit illo et, consequuntur quaerat dolorem alias, ea, adipisci dignissimos accusantium illum at. Soluta, sint.
  </p>

  <script>
  	//获取元素
  	var ele=document.getElementById("myImg");

  	/*节点名*/
  	console.log("nodeName: "+ele.nodeName);

  	/*节点值 元素节点没有节点值*/
  	console.log("nodeValue: "+ele.nodeValue);

  	/*节点类型 返回数字1*/
  	console.log("nodeType: "+ele.nodeType);

  	/*dir 专门看对象*/
  	console.dir(ele);
  	console.log("Element:"+ele);

  	/*属性节点 通过元素节点 获取属性节点*/
  	var attr=ele.getAttributeNode("src");
  	console.dir(attr);
  	console.log(attr);
  	console.log("nodeName: "+attr.nodeName);
  	console.log("nodeValue: "+attr.nodeValue);

  	/*所有的元素都是1 所有的属性节点都是2*/
  	console.log("nodeType: "+attr.nodType);
  	//2
  	console.log("");

  	/*文本节点  节点是对象类型*/
  	var p=document.getElementById("myP");
  	var txtNode=p.firstChild;
  	console.dir(txtNode);

  	console.log("nodeName: "+txtNode.nodeName);
  	console.log("nodeValue: "+txtNode.nodeValue);
  	console.log("nodeType: "+txtNode.nodeType);//3
  	console.log("");

  	/*注释节点*/
  	var comment=document.body.firstChild;
  	console.dir(comment);

  	console.log("nodeName: "+comment.nodeName);
  	console.log("nodeValue: "+comment.nodeValue);
  	console.log("nodeType: "+comment.nodeType);//8
  	
  	console.log("");				
  	/*document节点 document不是元素*/
  	console.dir(document);
  	console.log("nodeName: "+document.nodeName);
  	console.log("nodeValue: "+document.nodeValue);
  	console.log("nodeType: "+document.nodeType);//9
  </script>
  </body>
  </html>

    二、 从HTML获取元素

    1.通过ID

    • document.getElementById()
    • 一个元素具有ID属性，会自动生成与之同名的全局变量

    2.通过Name属性

    • getElementsByName()
    • IE9+ 所有的元素都有name属性
    • IE9- 个别元素有name属性
      • 表单和表单控件
      • img iframe embed object ....
    • docuemnt会为某些元素创建以元素name为名字的属性
      • <form>
      • <img>
      • ...

    3.通过标签名选择器

    • document.getElementsByTagName()
    • element.getElementByTagName()
    • docuemnt.images 页面中所有img的集合（引用）
    • document.links 所有超链接（有href属性）的集合
    • document.anchors 所有锚点（有name属性）的集合
    • document.forms 所有表单的集合

    4.通过class类名

    • document.getElementsByClassName()
    • element.getElementsByClassName()
    • IE9+

    5.通过选择器选择元素

    • document.querySelector() 选择满足条件的第一个
    • document.querySelectorAll() 选择所有满足条件的
    • element.querySelector() 选择满足条件的第一个
    • element.querySelectorAll() 选择所有满足条件的
    • IE8+

    6.document.all

    • 文档中所有的元素集合 页面中所有的标签

    • 可用于判断浏览器是否为IE(在非IE下document.all值为false)

        <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>获取文档元素</title>
  <style>
  	.box{
  		display:inline-block;
  		 200px;
  		height: 200px;
  		border:1px solid orange;
  	}
  </style>
  </head>
  <body>
  <div id="box01" class="box"></div>
  <div id="box02" class="box" name="lili"></div>
  <div id="box03" class="box" name="lili"></div>
  <div id="box04" class="box"></div>
  <div id="box51" class="box"></div>

  <script>
  	/*1.如果一个元素设置了ID.系统会生成与id同名的全局变量 id 名不能重复*/
  	box01.style.backgroundColor="pink";


  	/*2.通过name属性的值 才获取元素 IE9以上和标准浏览器认为 所有的元素都有name*/
  	var eles=document.getElementsByName("lili");
  	console.log(eles);
  	// eles.style.backgroundColor="#369";
  	

  	/*4.通过class类型*/ 
  	var eles=document.getElementsByClassName("box");
  	console.log(eles);
  	eles[3].style.backgroundColor="green";
  	
  	/*5.通过选择器  选择所有满足条件的*/
  	var eles=document.querySelectorAll(".box");
  	var eles=document.querySelectorAll("div");

  	/*下面两个ＩＥ８不支持*/
  	var eles=document.querySelectorAll("div[name='lili']");
  	var eles=document.querySelectorAll("div:first-of-type");
  	console.log(eles);
  	console.log("");

  	/*第一个满足条件的*/
  	var ele=document.querySelector(".box");
  	console.log(ele);

  	/*页面中所有的标签*/
  	console.log(document.all);

  </script>
  </body>
  </html>

    三、 文档节点的结构和遍历

    1.节点的关系

    • 父节点 父元素
    • 子节点 子元素
    • 兄弟节点 兄弟元素
    • 祖先节点 祖先元素
    • 后代节点 后代元素

    2.节点相关属性（作为节点树的文档）

    • parentNode 父节点
    • childNodes 所有子节点的集合
    • firstChild 第一个子节点
    • lastChild 最后一个子节点
    • nextSibling 下一个兄弟节点
    • previousSibling 上一个兄弟节点

    3.元素相关操作（作为元素树的文档）

    • parentElement 父元素

      • 大部分情况下 parentElement 等同于 parentNode

    • children 所有子元素的集合

    • firstElementChild IE9+ 第一个子元素

    • lastElementChild IE9+ 最后一个子元素

    • nextElementSibling IE9+ 下一个兄弟元素

    • previousElementSibling IE9+ 上一个兄弟元素

    • childElementCount IE9+ 子元素的数量

    • ownerDocument IE9+ 返回元素所属的文档对象（祖先节点）

        <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>文档的节点结构</title>
  </head>
  <body>
  <div>
  	<ul id="myList"><li>小丽丽1</li>
  		<li>小丽丽2</li>
  		<li id="myItem">小丽丽3</li>
  		<li>小丽丽4</li>
  		<li>小丽丽5</li>
  		<!-- 哈哈哈 -->
  	</ul>
  </div>

  <script>
  	var ulEle=document.querySelector("ul");

  	/**
  	 * 得到类数组对象： 
  	 * 一个元素的子节点包含（元素、文本、注释节点）不可能包含document节点
  	 * document是所有元素的祖先节点
  	 * 属性节点不是该元素的子节点
  	 * 子节点 集合（包括空格符 文本节点text）
  	 */
  	console.log(ulEle.childNodes);

  	/**
  	 * 第一个子节点
  	 *  最后一个子节点
  	 */
  	console.log(ulEle.firstChild);
  	console.log(ulEle.lastChild);

  	/**
  	 * 获取ul的第三个子节点
  	 */
  	console.log(ulEle.childNodes[4]);

  	/**
  	 * 获取父节点
  	 * 获取父节点的父节点
  	 */
  	console.log(ulEle.parentNode);
  	console.log(ulEle.parentNode.parentNode);

  	/**
  	 * 获取下一个兄弟节点
  	 * 获取上一个兄弟节点
  	 */
  	var li=document.querySelector("#myItem");
  	console.log(li);
  	console.log(li.nextSibling);
  	console.log(li.previousSibling);
  </script>
  </body>
  </html>

    四、 属性

    1.内置属性

    • js对象和html标签有映射关系

    2.自定义属性的操作（获取和设置非标准的HTML属性）

    • getAttribute(attrname) 获取自定义或内置属性的值
    • setAttribute(attrname,value) 设置自定义或内置属性
    • hasAttribute(attrname) 判断是否存在该属性
    • removeAttribute() 移出自定义或内置的属性

    3.H5新增的自定义属性操作操作

    • HTML： <tag data-attr="">
    • JS ： element.dataset.attr

    4.把属性当做属性节点（作为Attr节点的属性 ）

    • getAttributeNode(attrname) 返回节点对象（不再是值了）
    • setAttributeNode() 只有一个参数（属性节点对象）
    • document.createAttribute() 创建属性节点(不属于任何一个元素，需要用setAttributeNode()添加给一个指定的元素)

    五、元素的内容

    1.作为HTML的元素内容

    • innerHTML
    • outerHTML

    2.作为纯文本的元素内容

    • innerText 只有文字 会忽略多余的空格（没有样式）

    • textContent IE9+ 没有忽略制表符（保持样式）

        <body>
  <div class="article">
  	<h1></h1>
  	<h1>锄禾</h1>
  	<p>锄禾日当午</p>
  	<p>汗滴禾下土</p>
  	<p>Number盘中餐</p>
  	<p>粒粒皆辛苦</p>
  </div>

  <script>
  	var div=document.querySelector("div");
  	/**
  	 * 显示div里面的部分 有标签（不包含div）
  	 */
  	console.log(div.innerHTML);
  	/**
  	 * 显示整个div的内容 有标签(包含div)
  	 */
  	console.log(div.outerHTML);
  	/**
  	 * 仅仅显示文本内容（文字）且会忽略制表符 不保留原本的样式 类似没加pre
  	 */
  	console.log(div.outerText);
  	/**
  	 * 仅仅显示文本内容（文字）且不会忽略制表符 保留原本的样式 类似加了pre
  	 */
  	console.log(div.textContent);
  </script>
  </body>

    3.作为Text节点的元素内容

    • 文本节点的方法

      • appendData() 向文本节点追加内容
      • deleteData() 删除文本节点的一部分内容
      • insertData() 向文本节点中插入内容
      • replaceData() 替换内容
      • substringData() 截取内容

    • 创建文本节点

      • document.createTextNode()

    六、元素操作（创建插入删除节点）

    1.创建元素节点

    • document.createElement(tagName)

    2.添加元素（给父元素添加子元素）（插入节点）

    • appendChild(node) 在元素的最后追加一个子元素
    • insertBefore(newNode, oldNode) 在元素指定的位置插入一个子元素

    3.删除元素（节点）

    • removeChild(要删除的node) 父元素来调用(参数是个节点)

    4.替换元素（节点）

    • replaceChild(newNode, oldNode)父元素来调用

    5.克隆节点

    • cloneNode(false/true)

      • true 克隆元素以及所有的子节点

      • false 仅仅克隆节点本身（默认）

          <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>节点操作</title>
  <style>
  	#box{
  		800px;
  		padding:20px;
  		border:5px solid #ccc;
  		overflow: hidden;
  	}
  	#box img{
  		box-sizing: border-box;
  		200px;
  		height:200px;
  		
  	}

  	#box img.current{
  		border:2px solid red;

  	}
  </style>
  </head>
  <body>
  <button onclick="addImg()">添加元素</button>
  <button onclick="insertImg()">插入元素</button>
  <button onclick="delImg()">删除元素</button>
  <button onclick="repImg()">替换节点</button>
  <div id="box">
  	<img src="http://img0.imgtn.bdimg.com/it/u=3121973696,2340997418&fm=27&gp=0.jpg" alt="">
  	<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3577784738,4111720376&fm=111&gp=0.jpg" alt="">
  	<img src="http://img0.imgtn.bdimg.com/it/u=3121973696,2340997418&fm=27&gp=0.jpg" alt="">
  	<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3577784738,4111720376&fm=111&gp=0.jpg" alt="">
  	<img src="http://img0.imgtn.bdimg.com/it/u=3121973696,2340997418&fm=27&gp=0.jpg" alt="">
  </div>
  
  <img src="../../dist/images/5.jpg" alt="" id="newImage">
  <script>
  	var boxEle = document.querySelector("#box");

  	/**添加元素*/
  	function addImg(){
  		//创建元素
  		var newImage = document.createElement("img");
  		newImage.src = "../../dist/images/4.jpg";

  		//给某个元素追加 子节点
  		boxEle.appendChild(newImage);
  	}
  	
  	 /* 插入元素*/
  	function insertImg(){
  		//创建元素
  		var newImage = document.createElement("img");
  		newImage.src = "../../dist/images/4.jpg";

  		//插入到指定位置
  		boxEle.insertBefore(newImage, document.querySelector("#box img:nth-of-type(3)"));
  	}

  	/**删除元素*/
  	function delImg(){
  		var imgs=document.querySelectorAll("#box img");
  		//遍历
  		for(var i=0;i<imgs.length;i++){
  			//被选中
  			if(imgs[i].className==="current"){
  				boxEle.removeChild(imgs[i]);
  			}
  		}
  	}

  	/*替换节点*/
  	function repImg(){
  		var newImg=document.querySelector("#newImage");
  		var imgs=document.querySelectorAll("#box img");
  		for(var i=0;i<imgs.length;i++){
  			//被选中
  			if(imgs[i].className==="current"){
  				/*克隆节点*/
  				boxEle.replaceChild(newImg.cloneNode(),imgs[i]);
  			}
  		}
  	}
  
  	//给 img元素 添加 单击事件
  	boxEle.onclick = function(ev){
  		var e = ev || window.event;

  		if (e.target.nodeName.toLowerCase() === "img") {
  			e.target.classList.toggle("current");	
  		}

  	}
  	/*克隆box*/
  	document.body.appendChild(boxEle.cloneNode(true));
  </script>
  </body>
  </html>

    七、元素的尺寸位置滚动

    1.元素的位置（坐标）

    • getBoundingClientRect().left/top/right/bottom 返回对象 包含位置信息 大小信息
      • 相对于整个页面的坐标位置
    • offsetLeft/offsetTop 以第一个祖先为原点，距离左边/上边的距离, 相对规则同 css 的定位
    • clientLeft/clientTop 没卵用 就是边框宽
    • offsetParent 得到第一个定位的祖先元素

    2.查询元素的几何尺寸

    • getBoundingClientRect().width/heightIE8-不支持
    • getClientRects()集合（内容只有一个）得到一个矩形模型
    • offsetWidth/offsetHeight 属性
    • clientWidth/clientHeight 属性（基本不用）
    • scrollWidth/scrollHeight 属性（里面内容的宽度）

    3.滚动距离

    • scrollLeft
    • scrollTop

    4.判定某个元素在某点

    • document.elementFromPoint() 不常用

    八、docuemnt 对象

    1.属性

    • URL 只读（获取当前页面的url）

    • domain 只读（获取域名）

    • referrer 只读（获取上一个页面的地址 只读）

    • lastModified 文档的最后一次修改时间 只读

    • location 对location对象引用

    • title 文档标题（可以改）

    • cookie

    • ....

        <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>标题滚动</title>
  </head>
  <body>
  <script>
  	
  	document.title = "你有一条新消息【你家发大水了，你的电脑被冲走了】";
  	setInterval(function(){
  		document.title = document.title.substr(1) + document.title.charAt(0);
  	}, 300)
  </script>
  </body>
  </html>

    2.方法

    • write() 从页面中输出
    • writinln() 每写一行自动加个换行（是换行符 ）在浏览器上只会有一个空格

    九、HTML表单DOM

    选取表单和表单元素

    表单和表单元素的属性

    1.Form元素方法

    • submit()
    • reset()
    • elements

    2.按钮(submit reset button)方法

    • click() 使按钮比被单击（自动）
    • blur() 使失去焦点
    • focus() 获得焦点

    3.单选/复选

    • click() 被单击
    • blur() 失去焦点
    • focus() 获得焦点

    4.文本(input textarea)

    • blur() 失去焦点

    • focus() 获取焦点

    • select() 全部被选中

        <body>
  <form action="http://www.so.com/s" name="myForm">
  	<input type="txt" name="wd">
  	<select name="" id="">
  		<option value="">1</option>
  		<option value="">2</option>
  	</select>
  	<br>
  	<textarea name="" id="" cols="30" rows="10"></textarea>
  </form>
  
  <!-- 按钮写在了表单外面（正常情况下不能提交表单）
  写个函数就可以控制了 -->
  <button onclick="submitForm()">提交</button>

  <button onclick="selectText()">选中</button>

  <script>
  	console.log(document.myForm.elements);
  	function submitForm(){
  		document.myForm.submit();
  	}

  	function selectText(){
  		document.myForm.elements[2].select();
  	}

  	/* 自动获取焦点*/
  	document.myForm.elements[0].focus();
  	
  	//document.querySelector("#btn").click();
  </script>
  </body>

    5.select

    • 属性

      • options 得到option的集合
      • selectedIndex
      • length 选项的数量

    • 方法

      • add() 添加选项

      • remove() 移出选项, 参数是option的索引

      • focus() 获取焦点

      • blur() 失去焦点

          <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>HTML DOM select/option</title>
  <style>
  	select{
  		120px;
  		height:200px;
  	}
  </style>
  </head>
  <body>
  <select id="leftSelect" multiple>
  	<option>北京</option>
  	<option>上海</option>
  	<option>广州</option>
  	<option>深圳</option>
  	<option>天津</option>
  	<option>重庆</option>
  	<option>成都</option>
  	<option>武汉</option>
  </select>
  
  <button onclick="addOption()"> 添加 </button>
  <button onclick="deleteOption()"> 删除 </button>
  <button onclick="moveToRight()"> >> </button>

  <select id="rightSelect" multiple>	
  </select>
  <script>
  	var leftSelect = document.querySelector("#leftSelect");
  	var rightSelect = document.querySelector("#rightSelect");

  	/*添加*/
  	function addOption(){
  		var newOption = new Option("南京");
  		leftSelect.add(newOption);
  	}

  	/*删除*/
  	function deleteOption(){
  		for (var i = 0; i < leftSelect.options.length; i ++) {
  			//判断如果选中了
  			if (leftSelect.options[i].selected) {
  				leftSelect.remove(i);
  				i --;//因为删除之后下标会变
  			}
  		}
  	}		
  	/*移动到*/
  	function moveToRight(){
  		for (var i = 0; i < leftSelect.options.length; i ++) {
  			//判断如果选中了
  			if (leftSelect.options[i].selected) {
  				//移过来之后变为不选中，写在下面不行（在移动之前设置）
  				leftSelect.options[i].selected = false;
  				//添加到右边
  				rightSelect.add(leftSelect.options[i]);
  				i --;//因为移走之后下标会变
  			}
  		}
  	}
  </script>
  </body>
  </html>

    十、Table表格

    1.table

    • 属性

      • cells 返回包含表格中所有单元格的一个数组。
      • rows 返回包含表格中所有行的一个数组。

    • 方法

      • createCaption() 为表格创建一个 caption 元素。（caption内容需要在后面加.innerHTML）
      • deleteCaption() 从表格删除 caption 元素以及其内容。
      • createTHead() 在表格中创建一个空的 tHead 元素。
      • deleteTHead() 从表格删除 tHead 元素及其内容。
      • createTFoot() 在表格中创建一个空的 tFoot 元素。
      • deleteTFoot() 从表格删除 tFoot 元素及其内容。
      • insertRow(index) 在表格指定位置中插入一个新行。
        • 其中index的值为tableEle.rows.length
      • deleteRow(index) 从表格删除一行。

    2.tr

    • 属性

      • cells 返回包含行中所有单元格的一个数组。
      • rowIndex 返回该行在表中的位置。

    • 方法

      • deleteCell() 删除行中的指定的单元格。
      • insertCell() 在一行中的指定位置插入一个空的 元素。

    3.td th

    • 属性
      • cellIndex 返回单元格在某行的单元格集合中的位置。
  • 相关阅读:
    flex-direction
    flex-grow
    Push API
    ServiceWorker.state
    Using Service Workers
    Promise.then
    Promise()
    Using promises
    node-rsa
    async.waterfall
  • 原文地址：https://www.cnblogs.com/1666818961-lxj/p/7486999.html
Copyright © 2011-2022 走看看