javascript 操作DOM
通过JS来获取HTML标签
- document.getElementById("id名") //找出ID
- document.getElementsByTagName() //用来查找出标签元素，例如p标签
- document.getElementsByClassName()//用来查找出指定的class
<div id="intro">Dom简介</div>
<div id="main">
<P>The Dom is very useful 1</P>
<P>The Dom is very useful 2</P>
<P>The Dom is very useful 3</P>
</div>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<script type="text/javascript">
var intro = document.getElementById("intro");
var main = document.getElementById("main");
debugger;
var p = main.getElementsByTagName("p")[0];
console.log(p);
var content = document.getElementsByClassName("content")[0];
console.log(content);
</script>
修改HTML中的内容
- doucument.getElementById().innerHTML //修改html中的内容
- Element.getAttribute//获得HTML中的属性
- element.src//修改图片
- element.href//修改链接
<div id="main" data="nihao">123</div>
<img src="1.jpg" id="image">
<a id="gourl" href="">跳转到百度</a>
<script type="text/javascript">
var a=document.getElementById("main");
a.innerHTML='helloworld';
alert(main.getAttribute("data"));
a.setAttribute("data","buhao");
a.setAttribute("dd","ddname");
var image=document.getElementById("image");
image.src="2.jpg";
var gourl=document.getElementById("gourl");
gourl.href="www.baidu.com";
</script>
通过JS来修改样式
<div id="main">helloworld</div>
<script type="text/javascript">
var main=document.getElementById("main");
main.style.color="blue";
main.style.fontSize="100px";
DOM节点
- 创建节点：document.createElement("p")
注：通过createElement创建的元素并不属于document对象，它只是创建出来，并未添加到html文档中，要调用appendChild或insertBefore等方法将其添加到HTML文档中。 - 为所创建的节点添加内容：document.createTextNode("新增")
- 创建的节点声明位置：parent.appendChild(child)
它会将child追加到parent的子节点的最后面。另外，如果被添加的节点是一个页面中存在的节点，则执行后这个节点将会添加到新的位置，其原本所在的位置将移除该节点，也就是说不会同时存在两个该节点在页面上，且其事件会保留 - 删除标签：parent.removeChild(Child)
父关系
- parentNode：每个节点都有一个parentNode属性，它表示元素的父节点。Element的父节点可能是Element，Document或DocumentFragment；
- parentElement：返回元素的父元素节点，与parentNode的区别在于，其父节点必须是一个Element元素，如果不是，则返回null；
子关系
- children：返回一个实时的HTMLCollection，子节点都是Element，IE9以下浏览器不支持；
- childNodes：返回一个实时的NodeList，表示元素的子节点列表，注意子节点可能包含文本节点、注释节点等；
- firstChild：返回第一个子节点，不存在返回null，与之相对应的还有一个firstElementChild；
- lastChild：返回最后一个子节点，不存在返回null，与之相对应的还有一个lastElementChild；
兄弟关系
- previousSibling：节点的前一个节点，如果不存在则返回null。注意有可能拿到的节点是文本节点或注释节点，与预期的不符，要进行处理一下。
- nextSibling：节点的后一个节点，如果不存在则返回null。注意有可能拿到的节点是文本节点，与预期的不符，要进行处理一下。
- previousElementSibling：返回前一个元素节点，前一个节点必须是Element，注意IE9以下浏览器不支持。
- nextElementSibling：返回后一个元素节点，后一个节点必须是Element，注意IE9以下浏览器不支持。
<div id="div1">
<p id="p1">我是第一个p</p>
<p id="p2">我是第二个p</p>
<script type="text/javascript">
var p=document.createElement("p");
var word=document.createTextNode("我是新增的p标签")
p.appendChild(word);
var div1=document.getElementById("div1");
div1.appendChild(p);
var p1=document.getElementById("p1");
div1.removeChild(p1);
</script>
Dom事件
（元素，动作，反应结果）
dom事件的三种表示方法：
<h1 onchick="this.innerHTML='谢谢'">请点击该文本</h1>//事件内嵌元素中- Element.onclick=function(){显示内容}；
- Element.addEventListener("click",function(){});
<div onclick="alert('helloworld')">按钮</div>
<div id="main">我是main</div>
<div id="btn">我是btn</div>
<script type="text/javascript">
var main=document.getElementById("main");
main.onclick =function(){
alert('main被触发了');
}
var btn=document.getElementById("btn");
btn.addEventListener("click", function(){
alert("btn也被触发了");
});
</script>
JS window
window方法：
- window.opoen() //打开新窗口；
- window.close //关闭当前窗口；
- window.moveTo //移动当前窗口；
- window.resizeTo //调整当前窗口的尺寸；
<body>
<button onclick="openwindow()">创建窗口</button>
<button onclick="myfunction()">调整窗口</button>
<button onclick="movefunction()">移动窗口</button>
<button onclick="closefunction()">关闭窗口</button>
<script type="text/javascript">
var w;
function openwindow(){
w=window.open('','','width=300,height=300');
}
function myfunction(){
w.resizeTo(500,500);
w.focus();
}
function movefunction(){
w.moveTo(100,100);
}
function closefunction(){
w.close();
}
</script>
window screen
- 可用的屏幕宽度：screen.availWidth
- 可用的屏幕高度：screen.availHeight
window location
- location.hostname //返回web主机的域名；
- location.pathname //返回当前页面的路径和文件名；
- location.protocol //返回所使用的web协议；
- location.href //返回（当前页面的）整个URL；
window history
- history.back //与在浏览器中点击后退按钮相同；
- history.forword //与在浏览器中点击前进按钮相同；
- history.go //可以一步进行多次后退
window 弹出框
- 警告框：alert():
alert只有一个“确定按钮”，无返回值。用于确保用户可以得到某些信息。当警告框出现时要点击确定才可以进行后续操作。 - 确认框：comfirm（）
confirm 确认框有两个按钮，确定或者取消，返回true或者false。确认框使用户验证或者接受某些信息。当确认框出现后，用户需要点击确认后者取消按钮才可以进行后续操作。如果用户点击确认，则返回true，点击取消则返回false。 - 提示框：prompt()
prompt是提示框，返回输入的信息，或者其默认值提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或者取消按钮才能继续操作。如果用户点击确认，则返回值为输入的值。如果用户点击取消，那么返回值为null。
<body>
<script type="text/javascript">
function ale(){
alert("提示信息！")
}
function firm(){
if(confirm("你确定要提交吗？")){
alert("点击了确定");
}
else{
alert("点击了取消");
}
}
function prom(){
var name=prompt("请输入你的名字","");
if(name){
alert("欢迎您："+name)
}
}
</script>
<input type="submit" name="submit" value="提交" onclick="ale()">
<input type="submit" name="submit1" value="提交" onclick="firm()">
<input type="submit" name="submit2" value="提交" onclick="prom()">
</body>