您的位置：首页 > Web前端 > JavaScript

JavaScript之DOM详细使用实例

2017-04-27 15:57 274 查看 
**DOM**
<script type="text/javascript">
/*
* EMCA:
dom:文档对象模型  标签化成节点
bom:浏览器对象模型
*/
windom.onload = function(){//onload 等页面元素加载完毕采取执行Java
//获取节点的几种方式  1.通过id
var obj = document.getElementById("li1");
alert(obj);
var obj2 = document.getElementsByTagName("li")[0];//选择第一个
alert(obj2.length);

var obj3 = document.getElementsByName("n1")[0];
alert(obj3);
}
</script>
</head>
<body>
<img alt="" src="555.jpg" width="250px" height="200px">
<ul>
<li id="li1">何家豪</li>
<li>何小浩</li>
<li>何大浩</li>
</ul>
<form>
兴趣:<input type="checkbox" name="n1" value="1">足球
</form>

</body>

**获取节点的操作**

<script type="text/javascript">
/* 节点关系 ：1.子节点
2.父节点
3.兄弟节点

*/
window.onload = function(){

var obj = document.ElementById("u1");
var child = obj.firstElementChild;//第一个子节点
var child2 = obj.lastElementChild;//获取最后一个子元素

child.style.color = "red";
child2.style.color = "green";
//      alert(child.innerHTML);

//获取任意子节点方法
var child3 = obj.children;//获取所有的子节点
//      alert(child.length);
var child4 = allChild[3];
child4.style.color = "blue";

//获取父节点
var parent = obj.parentNode;
parent.style.border = "2px solid red";

//获取兄弟节点
var bro1 = obj.previousElementSibling;//上一个兄弟节点
bro1.style.color = "green";
var bro2 = obj.nextElementSibling;//下一个兄弟节点
bro2.style.color = "red";
}
</script>

**节点的增删改**

<script type="text/javascript">
/* 节点操作：增   删    改 */

function add(){
//创建节点
var newObj = document.createElement("p");//创建一个元素节点 <p>
//添加文本内容
var text = document.createTextNode("我是一个新添加的p段落内容。。");
newObj.appendChild(text); //添加子节点

var obj = document.getElementById("d1");
obj.appendChild(newObj); //添加到div里面
}

//添加附带属性的节点
function add2(){
var obj = document.getElementById("d1");
//创建节点
var img = document.createElement("img");
img.src = "444.jpg";
img.setAttribute("style","width:200px;height:200px");
//创建属性
var attr = document.createAttribute("good");//创建一个新的属性
attr.value = "我是新创建的属性";  //给属性赋值
//将属性添加到节点上
//  img.appendAttributeNode(attr);
//  img.setAttribute(attr.to,"我是新创建的属性");
//将节点添加到父节点里面
obj.appendChild(img);
}

//在子节点之前插入节点
function add3(){
var obj = document.getElementById("d1");
//创建节点
var img = document.createElement("img");
img.src = "444.jpg";
img.setAttribute("style","width:200px;height:200px");

obj.parentNode.insertBefore(img,obj);//插入节点的父节点调用此方法  (插入节点，被操作节点)
}

//自定义一个方法实现在节点后面插入节点
function insertAfter(newElement,oldElement){
var parent = oldElement.parentNode;//获取要操作的节点的父节点
if(parent.lastElementChild == oldElement){//刚好是最后一个节点
parent.appendChild(newElement);
}else{//不是最后一个节点   在下一个兄弟节点前面插入
parent.insertBefore(newElement,oldElement.nextElementSibling);
}
}

function add4(){
var obj = document.getElementById("d1");
//创建节点
var img = document.createElement("img");
img.src = "444.jpg";
img.setAttribute("style","width:200px;height:200px");

insertAfter(img,obj);
}

//替换节点
function f5(){
var obj = document.getElementById("p1");
//创建节点
var img = document.createElement("img");
img.src = "444.jpg";
img.setAttribute("style","width:200px;height:200px");

obj.parentNode.replaceChild(img,obj);  //替换节点
}

//删除节点
function f6(){
var obj = document.getElementById("p2");
obj.parentNode.removeChild(obj);
}

</script>

**事件**
<script type="text/javascript">
/* 事件组成：句柄     事件源 */
//定义事件的方式：1.内嵌     2.注册监听
window.onload = function(){
//内嵌
var obj = document.getElementsByTagName("input")[0];
obj.onclick = function(){
alert("input被点击了。。。");
}
//给div内嵌事件
/* var obj2 = document.getElementById("d1");
obj2.onmouseover = function(){
alert("鼠标进入div。。。");
}
obj2.onmouseout = function(){
alert("鼠标出了div。。。");
} */

//给body添加一个鼠标按下时触发的事件
var obj3 = document.getElementsByTagName("body")[0];
obj3.onmousedown = function(){
alert("body被点击了。。。")
}

}
//注册监听
function f(){
alert("第二个input也被点击了。。");
}
</script>

**属性操作**
<script type="text/javascript">
function f1(){
var obj = document.getElementsByTagName("img")[0];
alert(obj.getAttribute("title"));

}
function f2(){
var obj1 = document.getElementsByTagName("img")[0];
var obj2 = document.getElementsByTagName("img")[1];
obj1.setAttribute("src","222.jpg");
obj2.setAttribute("src","444.jpg");

}
function f1(){
var obj2 = document.getElementsByTagName("img")[0];
obj2.removeAttribute("title");//删除属性

}
</script>

**DOM操作**
<script type="text/javascript">
window.onload = function(){
/* 作用一 */
var obj = document.getElementsByTagName("li")[0];
//      alert(obj.innerHTML);//获取
//      obj.innerHTML = "新社会北京";//设置
//      alert(obj.innerText);//获取文本内容，去掉内层标签

/* 作用二 */
var obj2 = document.getElementsByTagName("img")[0];
alert(obj2.title);//获取属性  节点名字  属性名字
obj2.title = "这是改变后的标题！";//设置属性
obj2.src = "222.jpg";

/* 作用三  设置样式  */
}
function f(){
var obj = document.getElementsByTagName("div")[0];
obj.style.width = "400px";
obj.style.height = "400px";
obj.backgroundColor = "yellow";
obj.style.border = "2px solid blue";
}
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  java 函数 标签 dom
相关文章推荐
新的分享
章节导航