DOM操作html###
1.改变html输出流：
注意:绝对不要再文档加载完成之后使用document.write()。这会覆盖该文档
eg:(会覆盖原文档)
<body>
<p>Hello</p>
<button onclick=“demo”>按钮</button>
<script>
function demo(){
document.write(“World”);
}
</script>
</body>
2.寻找元素：
通过id找到html元素
通过标签名找到html元素
3.改变html内容：
使用属性：innerHTML
eg:
<body>
<p id=“pid”>Hello</p>
<button onclick=“demo()”>按钮</button>
<script>
function demo(){
//通过id找到html元素
var nv = document.getElementById(“pid”).innerHtML=“WS”;
/*
相同元素中的第一个元素
document.getElementByTagName("p");
*/
}
</script>
</body>
4.改变HTML属性：
使用属性attribute:
<body>
<a href="www.baidu.com" id="aid">网址</a>
<button onclick="demo()">按钮</button>
<script>
function demo(){
document.getElementById("aid").href = "www.google.com";
}
</script>
</body>
DOM操作HTML元素详解######
1.HTML DOM：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
DOM 操作html：JS改变html元素、html属性、css样式、对页面中所有事件作出反应
a.改变HTML输出流：
注意：不要再文档加载完成之后使用document.write()。这会覆盖该文档
b.寻找元素：
通过ID 找到HTML元素 document.getElementById()
通过标签名找到HTML元素 document.getElementsByTagName("p") 寻找相同元素中的第一个
c.改变html内容：
使用属性：innerHTML document.getElementById().innerHTML= "";
d.改变HTML属性：
使用属性：attribute
<body>
<img id="imgid" src="1.png">
<script>
document.getElementById(“imgid”).src="8.png";
</script>
</body>
方法：
getElementsByName() 获取name 通过 元素的name标签
getElementsByTagName() 获取元素 通过元素名 P
getAttribute() 获取元素属性 getAttribute("属性名")
setAttribute() 设置元素属性 setAttribute("属性名","属性值")
childNodes() 访问子节点
parentNode() 访问父节点
createElement() 创建元素节点
createTextNode 创建文本节点
insertBefore() 插入节点
removeChild() 删除节点
offsetHeight 网页尺寸
scrollHeight 网页尺寸
<script>
function getChildNode(){
var childnode = document.getElementByTagName("ul")[0].childNodes;
alert(childnode.length);
alert(childnode[0].nodeType)
}
function getParentNode(){
var div = document.getElementById("pid");
alert(div.parentNode.nodeName);
}
get ParentNode();
//创建元素节点
function createNode(){
var body = document.body;
var input = document.createElement("input");
input.type = "button";
input.value = "按钮";
body.appendChild(input);//在末尾插入
}
createNode();
//insertBefore
function addNode(){
var div = document.getElementById("div");
var node = document.getElementById("pid");
var newNode = document.createElement("p");
newNode.innerHTML = "动态添加第一个p元素";
div.insertBefore(newNode,node);//insertBefore(插入的节点，相对位置)
}
//removeChild
function removeNode(){
var div = document.getElementById("div");
var p = div.removeChild(div.childNodes[1]);
}
//offsetHeight
function getSize(){
var width = document.body.offsetWidth||document.documentElement.offsetWidth;
var height = document.body.offsetHeight;
}
</script>
DOM操作css###
1.通过DOM对象改变CSS
语法：document.getElementBuId(id).style.property=new style;
<head>
<style>
.div{
width:100px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<div class = "div" id="div">
hello
</div>
<button onclick="demo()">按钮</button>
<script>
function demo(){
document.getElementById("div").style.background = "blue";
document.getElementById("div").style.color = "blue";
}
</script>
</body>
DOM 操作EventListener###
语法：document.getElementById(id).style.property=new style
Dom EventListener:
1.addEventListener(): 向指定元素添加事件句柄
2.removeEventListener(): 移除添加的事件句柄
<button id="btn">按钮</button>
<script>
var x = document.getElementById("btn");
x.addEventListener("click",hello);
x.addEventListener("click"world);
x.removeEventListener("click",hello);
x.removeEventListener("click",world);
function hello(){
alert("Hello");
}
function world(){
alert("world");
}
</script>
网友评论