javascript Dom操作
2018-07-16 本文已影响0人
小杰的简书
clientHeight 返回元素的可见高度 (内容高度+padding高度)
clientWidth 返回元素的可见宽度 (内容宽度+padding宽度）
element.offsetHeight元素高度(内容高度+padding高度+border高度)
返回元素的高度。
element.offsetWidth 元素宽度(内容高度+padding高度+border高度)
返回元素的宽度。
element.offsetLeft祖先定位元素
返回元素的水平偏移位置
element.offsetTop祖先定位元素
返回元素的垂直偏移位置
focus()设置文档或元素获取焦点
window.onload = function() {
document.getElementById("myText").focus();
};
getAttributeNode()返回指定属性节点
function myFunction(){
var a=document.getElementsByTagName("a")[0];
var x=document.getElementById("demo");
x.innerHTML=a.getAttributeNode("target").value;
}
getElmentsByClassName('class') 方法返回具有指定类名的元素子元素集合，以 NodeList 对象。
getElmentById('id) 方法返回具有指定id名的元素子元素集合，以 NodeList 对象。
getElementsByTagName() 方法返回具有指定标签名的元素子元素集合，以 NodeList 对象。
<ul><li>Coffee</li><li>Tea</li></ul>
<p id="demo">请点击按钮来改变某个列表项的文本。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
var list = document.getElementsByTagName("UL")[0]
list.getElementsByTagName("LI")[0].innerHTML = "Milk";
}
</script>
设置属性
getAttribute() 方法返回指定属性名的属性值。
<a href="/jsref/dom_obj_attributes.asp" target="_blank">Attr 对象</a>，
<p id="demo">请点击按钮来显示上面这个链接的 target 属性值。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
var a=document.getElementsByTagName("a")[0];
document.getElementById("demo").innerHTML=a.getAttribute("target");
}
</script>
attributes 属性返回指定节点的属性集合，即 NamedNodeMap。
<p>点击按钮来查看 button 元素拥有多少属性。</p>
<button id="myBtn" onclick="myFunction()">试一下</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myBtn").attributes.length;
document.getElementById("demo").innerHTML = x;
}
</script>
<p>结果应该是 2（button 元素的 id 和 onclick 属性）。</p>
<p><b>注释：</b>Internet Explorer 8 以及更早的版本中，attributes 属性将返回元素所有可能的属性的集合，在本例中，会返回大于 2 的数字。</p>
setAttribute() 方法添加指定的属性，并为其赋指定的值。
document.getElementsByTagName("INPUT")[0].setAttribute("type","button");
nodeName 属性指定节点的节点名称。
如果节点是元素节点，则 nodeName 属性返回标签名。
入股节点是属性节点，则 nodeName 属性返回属性的名称。
对于其他节点类型，nodeName 属性返回不同节点类型的不同名称。
tagName 属性返回元素的标签名。
document.getElementById("demo").tagName;
dir设置或返回一个元素中的文本方向
<html>
<body id="myid" dir="rtl">
<script>
var x=document.getElementsByTagName('body')[0];
x.dir = 'rtl';
document.write("Text direction: " + x.dir);
document.write("<br>");
document.write("An alternate way: ");
document.write(document.getElementById('myid').dir);
</script>
</body>
</html>
className 属性设置或返回元素的 class 属性。
<body id="myid" class="mystyle">
<script>
var x=document.getElementsByTagName('body')[0];
x.className = 'class1';
document.write("Body CSS class: " + x.className);
document.write("<br>");
document.write("An alternate way: ");
document.write(document.getElementById('myid').className);
</script>
id 属性设置或返回元素的 id。
HTMLElementObject.id=id
document.write(x.id);
contentEditable 属性设置或返回元素内容是否可编辑。
<p id="myP">这是一个段落。请点击按钮进行编辑。</p>
<button onclick="myFunction()">试一下</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("myP").contentEditable = true;
document.getElementById("demo").innerHTML = "现在这个 p 元素可编辑。请尝试改变其文本。";
}
</script>
textContent 属性设置或返回指定节点的文本内容，以及它的所有后代。
document.getElementById("myList).textContent;
a.textContent = '我是内容';
innerHTML 属性设置或返回元素的 inner HTML。
document.getElementById('myAnchor').innerHTML="W3Schools";
document.getElementById('myAnchor').href="http://www.w3schools.com";
document.getElementById('myAnchor').target="_blank";
节点操作
lastChild返回列表中的最后一个子节点：
document.getElementById("myList").lastChild;
firstChild 属性返回指定节点的首个子节点，以 Node 对象。
<p id="demo">请点击按钮来获得文档首个子节点的节点名。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
var x=document.getElementById("demo");
x.innerHTML=document.firstChild.nodeName;
}
</script>
cloneNode(BOOL) 方法创建节点的拷贝，并返回该副本。ture克隆属性和子节点false克隆子节点
<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
<ul id="myList2"><li>Water</li><li>Milk</li></ul>
<p id="demo">请点击按钮把项目从一个列表复制到另一个列表中。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
var itm=document.getElementById("myList2").lastChild;
var cln=itm.cloneNode(true);
document.getElementById("myList1").appendChild(cln);
}
</script>
childNodes 属性返回节点的子节点集合，以 NodeList 对象。
<p id="demo">请点击按钮来获得 body 元素子节点的相关信息。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
var txt="";
var c=document.body.childNodes;
for (i=0; i<c.length; i++)
{
txt=txt + c[i].nodeName + "<br>";
};
var x=document.getElementById("demo");
x.innerHTML=txt;
}
</script>
<p><b>注释：</b>元素中的空格被视为文本，而文本被视为节点。</p>
appendChild() 方法向节点添加最后一个子节点。
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>
replaceChild() 方法用新节点替换某个子节点。你需要知道该元素的父元素。
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>
insertBefore() 方法在您指定的已有子节点之前插入新的子节点。
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>
parentNode 属性以 Node 对象的形式返回指定节点的父节点。
function myFunction(){
var x=document.getElementById("demo");
var y=document.getElementsByTagName("LI")[0];
x.innerHTML=y.parentNode.nodeName;
}
nextSibling 属性返回指定节点之后紧跟的节点，在相同的树层级中。\
function myFunction(){
var x=document.getElementById("demo");
x.innerHTML=document.getElementById("item1").nextSibling.id;
}
previousSibling 属性返回同一树层级中指定节点的前一个节点。
function myFunction(){
var itm=document.getElementById("item2");
var x=document.getElementById("demo");
x.innerHTML=itm.previousSibling.id;
}
删除操作
removeAttribute() 方法删除指定的属性。
document.getElementsByTagName("H1")[0].removeAttribute("style");
removeAttributeNode() 方法删除指定的属性，并以 Attr Node 对象返回被删除的属性。
var n=document.getElementsByTagName("INPUT")[0];
var a=n.getAttributeNode("type");
n.removeAttributeNode(a)
removeChild()方法指定元素的某个指定的子节点。
var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);
removeEventListener()移除由 addEventListener() 方法添加的事件句柄
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction()
{
document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler()
{
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
判断
如果存在指定属性，则 hasAttribute() 方法返回 true，否则返回 false。
document.getElementsByTagName("BUTTON")[0].hasAttribute("onclick");
如果指定节点拥有属性，则 hasAttributes() 方法返回 true，否则返回 false。
<p id="demo">请点击按钮来查看 body 元素是否拥有属性。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
var x=document.getElementById("demo");
x.innerHTML=document.body.hasAttributes();
}
</script>
hasChildNodes() 方法返回 true，如果指定节点拥有子节点，否则返回 false。
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<p id="demo">请点击按钮来查看列表元素是否拥有子节点。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
var lst=document.getElementById("myList");
var x=document.getElementById("demo");
x.innerHTML=lst.hasChildNodes();
}
</script>
haseFocus()检测文档或元素是否获取焦点
function myFunction() {
var x = document.getElementById("demo");
if (document.hasFocus()) {
x.innerHTML = "文档已获取焦点。";
} else {
x.innerHTML = "文档失去焦点。";
}
}
