一、获取dom的三种方式
index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="text" id="mytext" >
<form action="" id="myinput">
<input type="text" >
<input type="text" name="mytext" >
<input type="text" name="mytext" >
<input type="text" >
<textarea rows="2" cols="3"></textarea>
</form>
<div name="mytext" style="width: 20px; height: 30px;background: red;"></div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
index.js文件(获取dom的三种方式)
//1.根据id拿到相应的元素:通过document.getElementById() 特点:拿到的是唯一的一个元素
//var elementById=document.getElementById("mytext");
console.debug(elementById);
/**
* 2.根据标签拿到相应的元素
* 特点:标签不是是唯一的,可以获取到多个元素
* Element.getElementsByTagName(标签名):拿到这个元素中相应的标签
* Element.getElementsByTagName(*): 拿到这个元素中所有标签
* */
var inputs = document.getElementsByTagName("input");
console.debug(inputs);
/**
* 3. 根据名称拿到相应的元素
* 特点:可以获取到多个元素 只要名称相同可以拿到不同标签元素
* */
var mytext = document.getElementsByName("mytext");
console.debug(mytext);
/**
* 获取form标签中的四个input元素
* */
var myinput = document.getElementById("myinput");
console.debug(myinput);
//根据标签拿到相应的元素
//var inputs = myinput.getElementsByTagName("input");
var inputs = myinput.getElementsByTagName("*");
console.debug(inputs);
拿到根节点
index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
index.js文件
/**
* 拿到document文档根节点
* document.documentElement -> html标签
可返回存在于 XML 以及 HTML 文档中的文档根节点
document.body ->body标签
我们要注意的区别:
document.documentElement.clientHeight:它拿到的是整个窗口高度
document.body.clientHeight:拿到内容的高度
*
*/
//拿到body标签
var body = document.body;
console.debug(body);
console.debug(body.clientWidth);
console.debug(body.clientHeight);//高度是根据页面内容的高度决定
//拿到HTML标签
var htmlEle = document.documentElement;
console.debug(htmlEle);
console.debug(htmlEle.clientWidth);
console.debug(htmlEle.clientHeight);//页面上可以看到的高度
Node接口的属性与方法
index.html文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="text" id="mytext">
<ul id="westRun">
<li>唐唐</li>
<li>沙沙</li><li id="kong" value="zhi">空空</li>
<li>白白</li>
</ul>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
index.js文件
//拿到空空这个节点li,然后再通过这个节点拿到它的父节点ul(westRun)
var kong = document.getElementById("kong");
var parentNode = kong.parentNode;
console.debug(parentNode);
/**
* 拿到父节点,再去拿它的第一个节点
* 注意:空格换行也算一个元素
**/
var westRun = document.getElementById("westRun");
var firstChild = westRun.firstChild;
console.debug(firstChild);//拿到的是换行
//拿到列表列表中的最后一个节点
var lastChild = westRun.lastChild;
console.debug(lastChild);
/**
* 拿到父节点,再去拿它所有子节点的列表
* 注意:空格换行也算一个元素
**/
var westRun = document.getElementById("westRun");
var childNodes = westRun.childNodes;
console.debug(childNodes);
/**
* previousSibling:上一个兄弟节点
*/
var kong = document.getElementById("kong");
var previousSibling = kong.previousSibling;
console.debug(previousSibling);
/**
* nextSibling 下一个兄弟节点
*/
var kong = document.getElementById("kong");
var nextSibling = kong.nextSibling;
console.debug(nextSibling);
节点信息
index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="text" id="mytext">
<ul id="westRun">
<li>唐唐</li>
<li>沙沙</li><li id="kong" value="zhi">空空</li>
<li>白白</li>
</ul>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
index.js文件
/**
* nodeName 节点名称
* nodeValue 节点值
* nodeType 节点类型
* 1——代表Element(元素)li 2——代表Attribute(属性的值)id 3——代表Text(文本)
* */
/*
var kong = document.getElementById("kong");
console.debug("Element:nodeName:",kong.nodeName); //LI :标签名
console.debug("Element:nodeType:",kong.nodeType); //1 : 代表是一个Element
console.debug("Element:nodeValue:",kong.nodeValue);//null :Element是没有值的
var attr = kong.getAttributeNode("id");
console.debug("Attr:nodeName:",attr.nodeName);//id :属性名称
console.debug("Attr:nodeType:",attr.nodeType);//2 代表是一个Attr
console.debug("Attr:nodeValue:",attr.nodeValue);//kong:属性的值
var westRun = document.getElementById("westRun");
var text = westRun.firstChild;
console.debug("Text:nodeName:",text.nodeName); // #text
console.debug("Text:nodeType:",text.nodeType); // 3
console.debug("Text:nodeValue:",text.nodeValue);//文本的内容
*/
var westRun = document.getElementById("westRun");
var childNodes = westRun.childNodes;
//for(var key in childNodes){
// console.debug(childNodes[key]);//空行也拿到了,只想那四个li
//}
for(var i=0;i<childNodes.length;i++){//只拿标签
var child = childNodes[i];
if(child.nodeType == 1){
console.debug(childNodes[i]);
}
}
操作元素的方法
index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="text" id="newPerson"><br>
<input type="button" value="点点点" onclick="changeEle()">
<ul id="westRun">
<li>唐唐</li>
<li>沙沙</li><li id="kong" value="zhi">六二</li>
<li>白白</li>
<li id="mei">美女</li>
</ul>
<li id="bai">白龙马</li>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
index.js文件
//直接从内存中创建追加到页面上 添加元素 appendChild(node)
/*
function changeEle(){
var westRun = document.getElementById("westRun");
//创建一个li元素
var li = document.createElement("li");
//在标签中添加值
li.innerHTML = "白龙马";
//把创建的元素添加到westRun中
westRun.appendChild(li);
}
*/
/*
//拿到页面上的某一个标签,放到另外一个位置 添加元素 appendChild(node)
function changeEle(){
var westRun = document.getElementById("westRun");
//从页面中拿到相应的li
var li = document.getElementById("bai")
//把创建的元素添加到westRun中
westRun.appendChild(li);
}
*/
/*
//修改元素replaceChild(newChild, oldChild)(需要他们的父节点才可以修改)
function changeEle(){
var westRun = document.getElementById("westRun");
//拿到需要修改的元素——原来的
var kong = document.getElementById("kong");
//创建一个新的元素
var newKong = document.createElement("li");
newKong.innerHTML = "空空";
//把原来的替换成新建的
westRun.replaceChild(newKong, kong);
}
*/
/*
//在一个元素前面插入一个新的元素 insertBefore(newChild, refChild)
function changeEle(){
var westRun = document.getElementById("westRun");
//拿到旧的元素,用来确定在此元素前面 添加新元素
var kong = document.getElementById("kong");
//创建一个新的元素(标签)
var newEle = document.createElement("li");
//为新元素添加值
newEle.innerHTML = "美女";
//把新的元素添加到旧元素的前面
westRun.insertBefore(newEle, kong);
}
*/
/*
//删除元素
function changeEle(){
var westRun = document.getElementById("westRun");//拿到父节点
//拿到想要删除的元素
var mei = document.getElementById("mei");
//通过父节点删除元素
westRun.removeChild(mei);
}
*/
//需求:页面中有一个文本框用户输入值后点击按钮添加到列表中
function changeEle(){
//1.拿到父节点
var westRun = document.getElementById("westRun");
//2.拿到文本框中的值
var personName = document.getElementById("newPerson").value;
//3.创建一个元素,把文本框中获取的值放到这个元素里面
var newPerson = document.createElement("li");
newPerson.innerHTML = personName;
//4.把这个元素放到westRun元素里面
westRun.appendChild(newPerson);
}