DOM文档对象模型

一.节点

1.节点分类

元素类型节点类型

element(元素) 1

  //获取元素
  var ele=document.getElementById("myImg");
  console.log("Element: "+ele);
  console.log("nodeName: "+ele.nodeName);
  console.log("nodeValue:"+ele.nodeValue);
  console.log("nodeType: "+ele.nodeType);
  console.log("");

attr(属性) 2

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

text(文本) 3

  //文本节点
  var p=document.getElementById("myP");
  var txtNode=p.firstChild;
  console.log(txtNode);
  console.dir(txtNode);
  console.log("nodeName: "+txtNode.nodeName);
  console.log("nodeValue: "+txtNode.nodeValue);
  console.log("nodeType: "+txtNode.nodeType);
  console.log("");

comment(注释) 8

  //注释节点
  var comment=document.body.firstChild;
  console.dir(comment);
  console.log("nodeName: "+comment.nodeName);
  console.log("nodeValue: "+comment.nodeValue);
  console.log("nodeType: "+comment.nodeType);

document（文档） 9

  //文档节点
  console.log(document);
  console.log(document.nodeName);
  console.log(document.nodeValue);
  console.log(document.nodeType);

2.属性

nodeName(节点名字)
nodeValue(节点值)
nodeType(节点类型)

二.从HTML获取元素

1.通过ID

getElementById()

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

  //如果一个元素设置了ID,系统会生成与id同名的全局变量
  box01.style.backgroundColor="green";

IE9+ 所有的元素都有name属性
IE9- 个别元素有name属性

2.通过标签名

getElementsByTagName()
element.getElementsByTagName()
document.images(所有img的引用)
document.links(所有超链接的引用)
document.anchors(所有锚点的引用)
document.forms（所有表单的引用）

3.通过class类型(类名)

getElementsByClassName()

  //通过class类型
  var eles=document.getElementsByClassName("box");
  console.log(eles);
  eles[3].style.backgroundColor="#ccc";

IE9+
element.getElementsByClassName()

4.通过选择器

document.querySelector()

  var ele=document.querySelector(".box");
  console.log(ele);

document.querySelectorAll()

  //根据选择器
  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);

element.querySelectorAll()
element.querySelector()

5.document.all

文档中所有的元素
```
  console.log(document.all);
```

document.all它的自带可以判断是否是IE

	if (document.all) {
		console.log("啊，我是IE");
	} else {
		console.log("啊，我不是IE");
	}

三.文档节点的结构

1.节点的关系

父节点父元素

  //父节点
  console.log(ulEle.parentNode);
  console.log(ulEle.parentNode.parentNode);

子节点子元素

  var ulEle=document.queryselector("ul");
  //子节点
  console.log(ulEle.childNodes);
  console.log(ulEle.firstChild);
  console.log(ulEle.lastChild);

兄弟节点兄弟元素

  //兄弟节点
  var li=document.querySelector("#myItem");
  console.log(li.nextSibling);
  console.log(li.previousSibling);

祖先节点祖先元素
后代节点后代元素

2.节点相关属性

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

3.元素相关属性

parentElement（父元素）
大部分情况下 parentElement 等同于 parentNode
children（所有子元素的集合）
firstElementChild IE9+
lastElementChild IE9+
nextElementSibling IE9+
previousElementSibling IE9+
childElementCount 子元素的数量 IE9+

ownerDocument IE9+（返回元素所属的文档对象）

  <script>
  	var ulEle=document.querySelector("#myList");
  	//父元素
  	console.log(ulEle.parentElement);
  	console.log(document.documentElement.parentNode);
  	console.log(document.documentElement.parentElement);

  	//子元素
  	console.log(ulEle.children);
  	console.log(ulEle.firstElementChild);
  	console.log(ulEle.childElementCount);
  	console.log(ulEle.children.length);
  	console.log(ulEle.ownerDocument);
  </script>

四、属性

1、内置属性

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

2、自定义属性

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

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

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

4、把属性当做属性节点

getAttributeNode(attrname)

五、元素的内容

1、作为HTML的元素内容

innerHTML
outerHTML

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

innerText 会忽略多余的空格

textContent IE9+

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

  <script>
  	var div=document.querySelector("div");
  	console.log(div.innerHTML);
  	console.log(div.outerHTML);
  	console.log(div.innerText);
  	console.log(div.textContent);
  </script>

3、作为Text节点操作(了解)

文本节点的方法
appendData()向文本节点追加内容
deleteData()删除文本节点的一部分内容
insertData()向文本节点中插入内容
replaceData()替换内容
substringData()截取内容
创建文本节点
document.createTextNode()

六、元素操作（节点）

1、创建元素

document.createElement(tagName)

  function addImage(){
  	//创建元素
  	var newImage=document.createElement("img");
  	newImage.src="../images/4.jpg";

  	//给某个元素追加子节点
  	boxEle.appendChild(newImage);
  }

2、添加元素（给父元素添加子元素）

appendChild(node)

insertBefore(newNode, oldNode)

  function insertImage(){
  	//创建元素
  	var newImage=document.createElement("img");
  	newImage.src="../images/4.jpg";

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

3、删除元素

removeChild(node)

  function deleteImage(){
  	var imgs=document.querySelectorAll("#box img");

  	for(var i=0;i<imgs.length;i++){
  		if(imgs[i].className === "current"){
  			boxEle.removeChild(imgs[i]);
  		}
  	}

  }

4、替换元素

replaceChild(newNode, oldNode)

  function replaceImage(){
  	var newImage=document.querySelector("#newImage");
  	var imgs=document.querySelectorAll("#box img");

  	for(var i=0;i<imgs.length;i++){
  		if(imgs[i].className === "current"){
  			boxEle.replaceChild(newImage.cloneNode(),imgs[i]);
  		}
  	}

  }

5、克隆节点

cloneNode(false)

  //给img元素添加 单击事件
  boxEle.onclick=function(ev){
  	var e=ev || window.event;
  	if(e.target.nodeName.toLowerCase() === "img"){
  		e.target.classList.toggle("current");
  	}
  }

  document.body.appendChild(boxEle.cloneNode(true));

七、元素的尺寸大小

1、元素的位置

getBoundingClientRect()返回对象包含位置信息大小信息

  console.log(boxEle.getBoundingClientRect().left);
  console.log(boxEle.getBoundingClientRect().top);

offsetLeft/offsetTop距离左边/上面的距离, 相对规则同 css 的定位
```
  console.log(boxEle.offsetLeft);
  console.log(boxEle.offsetTop);
```
clientLeft/clientTop没卵用就是边框宽
offsetParent得到第一定位的祖先元素

2、元素的尺寸

getBoundingClientRect()

  console.log(boxEle.getBoundingClientRect().width);
  console.log(boxEle.getBoundingClientRect().height);

offsetWidth/offsetHeight

  console.log(boxEle.offsetWidth);
  console.log(boxEle.offsetHeight);

clientWidth/clientHeight
scrollWidth/scrollHeight

getClientRects()

  console.log(boxEle.getClientRects());

3、滚动距离

scrollLeft
scrollTop

八、docuemnt

1、属性

URL 只读
domain 获取域名只读
referrer 获取上一个页面的地址只读
lastModified 文档的最后一次修改时间只读
location 对location对象引用

title 文档标题

  <script>
  	console.log(document);
  	console.log(document.URL);//只读
  	console.log(document.domain);//只读
  	console.log(document.referrer);//只读
  	console.log(document.lastModified);//只读
  	console.log(document.title);
  	document.title="你有一条新消息"
  </script>

标题滚动

<script>
	document.title="您有一条新消息【你家发大水了，您的电脑被冲走了】";

	setInterval(function(){
		document.title=document.title.substr(1)+document.title.charAt(0);
	},300)
</script>

2、方法

write()
writinln()

九、表单DOM

1、Form元素

submit()
reset()
elements

2、按钮(submit reset button)

click()
blur()
focus()

3、单选/复选

click()
blur()
focus()

4、文本(input textarea)

blur()
focus()
select()

5、select

add() 新增选项

  <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()" id="btn">提交</button>
  	<button onclick="selectText()">选中</button>
  
  	<script>
  		console.log(document.myFom.elements);
  		function submitForm(){
  			document.myForm.submit();
  		}
  
  		function selectText(){
  			document.myForm.elements[2].select();
  		}
  		document.myForm.elements[0].focus();
  	</script>
  </body>

十、HTML DOM

1、Select

属性options
方法add()
方法remove()

小实例

	<head>
		<meta charset="UTF-8">
		<title>HTML DOM select/option</title>
		<style>
			select{
				width: 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、属性

rows 行数组
cells 单元格数组

2.方法

createCaption()为表格创建一个 caption 元素。
deleteCaption() 从表格删除 caption 元素以及其内容
createTHead() 在表格中创建一个空的 tHead 元素
deleteTHead()
createTFoot() 在表格中创建一个空的 tFoot 元素
deleteTFoot()
insertRow() 添加一个tr
deleteRow(index) 删除一行

十二、tr

1、属性

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

2、方法

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

td th属性

cellIndex 返回单元格在某行的单元格集合中的位置

posted @ 2017-09-04 17:07 不完美的完美阅读(234) 评论(0) 收藏举报

刷新页面返回顶部

不完美的完美

DOM文档对象模型

一.节点

1.节点分类

2.属性

二.从HTML获取元素

1.通过ID

2.通过标签名

3.通过class类型(类名)

4.通过选择器

5.document.all

三.文档节点的结构

1.节点的关系

2.节点相关属性

3.元素相关属性

四、属性

1、内置属性

2、自定义属性

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

4、把属性当做属性节点

五、元素的内容

1、作为HTML的元素内容

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

3、作为Text节点操作(了解)

六、元素操作（节点）

1、创建元素

2、添加元素（给父元素添加子元素）

3、删除元素

4、替换元素

5、克隆节点

七、元素的尺寸大小

1、元素的位置

2、元素的尺寸

3、滚动距离

八、docuemnt

1、属性

2、方法

九、表单DOM

1、Form元素

2、按钮(submit reset button)

3、单选/复选

4、文本(input textarea)

5、select

十、HTML DOM

1、Select

十一、Table

1、属性

2.方法

十二、tr

1、属性

2、方法

td th属性

公告