我的世界无法定位java
操作节点属性
// 获取节点属性 getAttribute("属性名"); // 设置节点属性 setAttribute("属性名","属性值");创建和插入节点
// 创建新节点 document.createElement("元素名称");我们获得了某个节点，假如这个节点是空的直接用innerHTML就可以增加一个新的元素，但是如果这个节点存在元素就不能这样做，会导致节点中的内容被覆盖
<p id="js">JavaScript</p> <div id="list"> <p id="se">javaSE</p> <p id="ee">JavaEE</p> <p id="me">JavaME</p> </div> <script> // 已存在标签 var js=document.getElementById('js'); var list=document.getElementById('list'); list.appendChild(js); // 追加到后面 // 未存在标签 var newP=document.createElement('p'); // 创建一个p标签 ='newP'; newP.setAttribute('id','hello');// 可以设置标签中的属性值 newP.innerText='Hello'; list.appendChild(newP); </script>克隆和插入节点
名称
描述
element.appendChild(childNode)
为元素添加一个新的子元素
element.insertBefore(A,B)
把A节点插入B节点之前
element.cloneNode(deep)
克隆某个节点
注: cloneNode(deep)中参数deep为布尔值。若deep的值为true，则递归复制当前节点以及该节点的所有子节点；否则只复制当前节点。
删除和替换节点
删除节点的步骤: 先获取父级节点，通过父级节点删除
// 删除节点 node.removeChild(childNode); //替换节点 node.replaceChild(newnode,oldnode);例:
<div id = "father"> <h1> 标题一 </h1> <p id="p1"> p1 </p> <p id="p2"> p2 </p> </div> <script> var self = docunment.getElementBylyId('p1'); var father= p1.parentElement; // 删除节点是一个动态的过程: 下面代码在删除第一个后就会报错 father.removeChoild(father.children[0]); father.removeChoild(father.children[1]); father.removeChoild(father.children[2]); </script>注意：删除多个节点的时候，children是时刻在变换的，删除节点一定要注意
获取节点元素位置
offset与client
offset指偏移，即这个元素在文档中占用的所有显示的宽度
offsetWidth 与 offsetHeigth 属性返回元素的宽度和高度，指元素自身的绝对宽度，不包括因overflow属性而未显示的部分，即由边框宽度+内边距+元素内容结构
offsetLeft属性返回当前元素左边界到它上级的左边界的距离
offsetTop属性返回当前元素上边界到它上级的上边界的距离
offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent属性的父级元素中最近的元素( 在包括层次中最靠近的 )，并且是已进行过CSS定位的容器元素
client指元素本身可视宽度，通过offsetWidth和offsetHeight属性可以得到元素的绝对宽度和高度，但如果仅想得到元素的可见宽度和高度，则需要使用clientWidth和clientHeigth属性
element,clientWidth; // 可见宽度 element,clientHeigth;//可见高度scroll
scroll 指滚动，用来描述网页整体与浏览器之间的关系。首先浏览器的高度是固定的，在日常的开发中，网页的高度一般远远大于浏览器的高度。这时如果想要获取滚动条滚动的距离，就可以使用scrollLeft与scrollTop属性
element.scrollTop; element.scrollLeft;导航栏吸顶效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ background-color: #0a9dec; margin-top: 30px; height: 30px; } .one{ margin-top: 30px; background-color: #0a9dec; height: 30px; } .two{ position: fixed; top: 0px; margin-top: 0; width: 100%; } h1{ height: 1800px; } </style> </head> <body> <div id="nve"> div </div> <h1> h1 </h1> <script> // 在js中主动绑定事件 window.onscroll=function (){ var node=document.getElementById('nve'); if (document.documentElement.scrollTop>node.offsetTop){ node.className='two'; }else { node.className='one'; } } </script> </body> </html>