1.dom包括css-dom和html-dom
document.html.head.title
.body
.h1
#下面才是常用的
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
2.节点的属性
- getElementsByName(“”).
parentNode
childNodes
firstChild第一个孩子 || firstElementChild 可以解决兼容性问题
lastChild || lastElementChild
nextSibling 下一个兄弟
previousSibing || previousElementSibing
nodeType 1是一个元素 2 3是文本
nodeName type为3 为 #text
nodeValue 是text的话可以拿到节点里面的文本
3.只保留2位小数
.toFixed(2);
4.操作节点
- 属性
html:
name=“book”;
name=“book”;
js:
.getAttribute(“xxx”);
.setAttribute(“src”,“./dogdog.jpg”);
book[0].check- 创建节点
document.getElementsByTagName(“div”)[0];
document.createElement(“img”);
.appendChild(img);
//克隆
xx.cloneNode(false);
xx.insertBefore(copyNode,xx.firstChild);//要在一个节点下,第三个是节点的插入位置- 删除节点
xxNode=xxxgetElement();//必须先得到节点
xxNode.parentNode.removeChild(xxNode);//父节点删除子节点
oldNode.parentNode.replaceChild(newNode,oldNode);//
3.改变样式属性
- .style.color=‘#aaaaa’;
.backgroundColor=“#xxxxxx”
.zIndex=“100”
.borderBottom=“none”; //底边框 solid 1px #aaa
.display=“none”; //block显示
.position=“relative”;
.top=“10px”;
.className=“xxx”;
3.事件 οnmοuseοver=“over” 在上面 οnmοuseοut=“out” 离开
4.在html可以写this,代表当前这个元素的对象
<div id="cart">
<p onclick="del(this)"></p>
</div>
del(obj){
var delNode=obj.parentNode;
delNode.parentNode.removeChild(delNode);
5.js改变元素(css参数的驼峰命名)
xxdom.style.color="#aaa";
.className="";
.currentStyle#浏览器兼容
.value 获取表单的值
.setAttribute("src","image/dog.jpg");
}
6.随机数
Math.floor(Math.radom()*4); //[0-4)
//div添加img节点
div.appendChild(img);
7.滚动位置(相当于css的position:fixed的js实现) 需要兼容谷歌和火狐和ie
document.body.scrollTop;
function cl(){
document.querySelector("#float").style.display = "none"
document.querySelector("#close").style.display = "none"
}
function place(){
console.log("aaa");
closeObject = document.querySelector("#close");
floatObject = document.querySelector("#float");
//支持IE
if(closeObject.currentStyle){
console.log("aaa1");
console.log(closeObject.currentStyle.style);
closeTop=closeObject.currentStyle.top;
closeLeft=floatObject.currentStyle.left;
floatTop=closeObject.currentStyle.top;
floatLeft=floatObject.currentStyle.left;
}else{
closeTop = parseInt(document.defaultView.getComputedStyle(closeObject,null).top)//支持IE9以上版本,支持火狐,只读属性
closeLeft = parseInt(document.defaultView.getComputedStyle(closeObject,null).left)
floatTop = parseInt(document.defaultView.getComputedStyle(floatObject,null).top)
floatLeft = parseInt(document.defaultView.getComputedStyle(floatObject,null).left)
}
}
function roll(){
console.log("bbb");
let closeScrollTop = parseInt(document.documentElement.scrollTop||document.body.scrollTop)
let closeScrollLeft = parseInt(document.documentElement.scrollLeft || document.body.scrollLeft)
let floatScrollTop = parseInt(document.documentElement.scrollTop||document.body.scrollTop)
let floatScrollLeft = parseInt(document.documentElement.scrollLeft||document.body.scrollLeft)
closeObject.style.top = closeTop+closeScrollTop+"px";
closeObject.style.left = closeLeft+closeScrollLeft+"px";
floatObject.style.top = floatTop+floatScrollTop+"px";
floatObject.style.left = floatLeft+floatScrollLeft+"px";
}
window.onload = place; //启动时加载这个函数
window.onscroll = roll; //监听函数,如果滚动条滚动可以调用函数
8.js script标签写了src,里面不能写内容 !!!