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>