原生JS学习笔记

悠悠 2022-02-14 00:57 216阅读 0赞

## 原生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);

运行结果如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70]  
*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关于获取元素的补充知识][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>

运行之后的结果为：  
![增删元素时，在控制台的显示][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 1]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70]: /images/20220214/db70a5e1d6f94a57902560d6de959f7b.png
[shangrila-xiu]: https://shangrila-xiu.github.io/2019/04/25/javascript%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E7%9A%84%E6%96%B9%E6%B3%95/#more
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 1]: /images/20220214/ea4b996288a6499ea7434438663675ab.png