原生JS学习笔记

原生JS

1、高宽属性

console.log("窗口显示区的宽度（包括了右边滚动条，不包括开发者工具或者window任务栏):"+window.innerWidth);
		console.log("窗口的整个宽度（包括了右边滚动条、开发者工具和window任务栏，如果任务栏在侧边)"+window.outerWidth);
		console.log("返回窗口文档的左上角到滚动条最左边的距离。（其Y属性可以用以做返回顶部滚动）"+window.pageXOffset);
		console.log("返回窗口左上角--也就是浏览器的左上角在设备屏幕上的横坐标 "+window.screenX+"、"+window.screenLeft);
		console.log("设备屏幕的宽度、包括所有 "+screen.width);
		console.log("设备屏幕的宽度、除了任务栏"+screen.availWidth);
		console.log("窗口显示区的宽度，不包括滚动条 "+document.documentElement.clientWidth);
		// console.log("元素的可见宽度"+element.clientWidth);
		// console.log("元素的可见宽度、包括了布局宽度和本身宽度"+element.offsetWidth);
		// console.log("元素的水平偏移位置"+element.offsetLeft);
		// console.log("返回元素的整体宽度、包括滚动隐藏"+element.scrollWidth);
		// console.log("返回元素的滚动隐藏宽度"+element.scrollLeft);
		console.log("补充如下");
		console.log("网页可见区域宽"+document.body.clientWidth);
	console.log("网页可见区域高"+document.body.clientHeight);

	console.log("网页可见区域宽(包括边线的宽）"+document.body.offsetWidth);
	console.log("网页可见区域宽（包括边线的高）"+document.body.offsetHeight);

	console.log("网页正文全文宽"+document.body.scrollWidth);
	console.log("网页正文全文高"+document.body.scrollHeight);

	console.log("网页被卷去的高"+document.body.scrollTop);
	console.log("网页被卷去的左"+document.body.scrollLeft);

	console.log("网页正文部分的左"+window.screenLeft);
	console.log("网页正文部分上"+window.screenTop);

	console.log("屏幕分辨率的高"+window.screen.height);
	console.log("屏幕分辨率的宽" +window.screen.width);
	
	console.log("屏幕可用工作区的宽"+window.screen.availWidth);
	console.log("屏幕可用工作区的高"+window.screen.availHeight);

运行结果如下所示：

2、获取元素

<p>document.getElementById(''); 获得相应ID的元素，返回节点。
document.getElementsByName('') 获得相应name的元素集合，返回数组。
document.getElementsByTagName('') 获得相应tag的元素集合，例如span,div之类的。返回数组。
getElementsByClassName()获得相应class的元素集合
下面是css选择器，类似jquery的使用

document.querySelector('') 获取第一个匹配的元素
document.querySelectorAll('') 获取全部匹配的元素</p>
<div id="IdFind">
	这是通过id获取元素
</div>

<div id="box3">
  <input type="text" name = "user"/>
</div>
<script>
var InputName = getElement.getElementsByName('user');
</script>
<div class="ClassG">
	这个是通过class获取
</div>

<script>
	var IdFind = document.getElementById('IdFind');
	console.log("通过id获取元素"+IdFind);
	var Name = document.getElementsByName("user");
	console.log("通过name获取元素"+Name);
	var P = document.getElementsByTagName("p")[0];
	console.log("通过标签获取元素"+P);
	var ClassG = document.getElementsByClassName("ClassG");
	console.log(ClassG);
</script>

想了解更多，到本人博客上看看吧：
shangrila-xiu关于获取元素的补充知识
3、增删元素
注意下面的输出Div，每次都是先把下面的的注释掉，才得到的结果。

	<p>createTextNode() 创建文本节点。
		createTextNode('this is a text')<br>
createElement() 创建元素节点。
		createElement('div')<br>
appendChild() 在该节点中加入新的节点。 
		appendChild(document.createTextNode('hello'))<br/>
insertBefore() 在某节点前面增加新的节点。
		insertBefore(node1, node2)在node2前面增加node1<br/>
removeChild() 删除该节点中的某一个节点。
		removeChild(node)<br/>
replaceChild() 将某一节点替换成新的节点。
		replaceChild(node1, node2)将node2替换为node1
</p>


	<script>
		var Div = document.createElement('div');
		console.log("创建了第一个元素节点Div-----"+Div);

		var Hxx = document.createTextNode('Old');
		console.log("创建了第一个文本节点Hxx-----"+Hxx);
		console.log(Div);//没有内容

		var DText = document.createTextNode('this is text');
		console.log("创建了第二个文本节点DText------"+DText);
		console.log(Div)//没有内容
		

		console.log("给Div新增一个文本节点 开始了")
		var newS = Div.appendChild(document.createTextNode('Hello'));
		console.log("给Div元素节点增加一个文本节点newS-----"+newS);
		console.log(Div);//hello，上面两个的值也是hello
		console.log("给Div新增一个文本节点 结束");

		console.log("InsertBefore 开始了")
		var InsertBefore = Div.insertBefore(Hxx,newS);
		console.log("在Div节点里面的文本节点newS之前插入Hxx------"+Div);
		console.log(Div);//"Old" "Hello"上面的都变成这样
		console.log("InsertBefore 结束");

		console.log("ReplaceChild开始了")
		var ReplaceChild = Div.replaceChild(DText,Hxx);
		
		console.log("Hxx被DText替换之后：");
		console.log(Div)//"this is text" "Hello"  上面的都变成这个
		console.log("ReplaceChild结束");


console.log("删除列表中的值")
function myFunction(){
	var list=document.getElementById("myList");
	list.removeChild(list.childNodes[0]);
	console.log(list);
}

	</script>
		<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
<p id="demo">单击按钮移除列表的第一项</p>
<button onclick="myFunction()">点我</button>

运行之后的结果为：

如果想复制这篇博客，请注明转载！！！