JavaScript DOM

JS和DOM

D:Document(文档),O:Object(对象),M:Model:模型

模型指的是标签的家谱树

DOM的原子是元素节点,但就像原子还能再细分,一个元素又可以分为文本节点和属性节点

javascript获取元素

getElementById

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>DEMO</title>
</head>
<body>
<h1>ccdragon.cc</h1>
<p title="link">https://ccdragon.cc</p>
<ul id="buy">
<li class="sale">cup</li>
<li class="important sale">milk</li>
<li>keyboard</li>
</ul>
<script>

alert(typeof document.getElementById("sale"));

</script>
</body>
</html>

getElementsByTagName

返回一个对象数组

alert(document.getElementsByTagName("li").length);

当然以上2中可以结合起来使用

var a=document.getElementById("buy");
alert(a.getElementsByTagName("*").length);

getElementsByClassName

和上面类似

但是比如找important sale,输入sale important也能找到

var a=document.getElementsByClassName("sale important");
alert(a.length);

这是因为当设置属性为 important sale的时候,表示的是当前标签有2个属性,分别是important和sale,在css中,后加载的css会覆盖先加载的css

getAttribute

不能通过document调用,而是通过对象节点调用

var a=document.getElementsByClassName("sale");
for(var i=0;i<a.length;i++){
alert(a[i].getAttribute("class"));
}

setAttribute

object.setAttribute(attribute,value)

var a=document.getElementsByClassName("sale");
for(let i=0;i<2;i++)
{
    alert(i);
    (a[0]).setAttribute("class","shit");
}

注意for里面要用a[0]而不是a[i]

而且这个方法对静态文件无影响

图片库

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>DEMO</title>
</head>
<body>
<h1>ccdragon pic</h1>
<ul>
<li> <a href="./a.png" onclick="showpic(this);return false;" title="grey">grey</a></li>
<li> <a href="./b.png" onclick="showpic(this);return false;" title="cat">cat</a></li>
<li> <a href="./c.png" onclick="showpic(this);return false;" title="another cat">another cat</a></li>
</ul>
<img src="./69286415_p4_master1200.jpg" alt="my image" id="placeholder">
<script>

function showpic(pic) {
  var source=pic.getAttribute("href");
  var placeholder=document.getElementById("placeholder");
  placeholder.setAttribute("src",source);
}
</script>
</body>
</html>

onclick事件添加return false;可以点了链接以后不弹出网页

function countBodyChildren() {
  var bodyElement=document.getElementsByTagName("body")[0];
  alert(bodyElement.childNodes.length)
}
window.onload(countBodyChildren());

返回了8,说明body有8个子元素

window.onload=countBodyChildren;

这样却提示9个子元素?


另外,节点还有nodeType

  • 元素节点nodeType=1
  • 属性节点nodeType=2
  • 文本节点nodeType=3

另外可以使用nodeValue来改变文字节点的值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>DEMO</title>
  <link rel="stylesheet" href="./kksk.css">
</head>
<body>
<h1>ccdragon pic</h1>
<ul>
<li> <a href="./a.png" onclick="showpic(this);return false;" title="grey and sensei">grey</a></li>
<li> <a href="./b.png" onclick="showpic(this);return false;" title="a cat">cat</a></li>
<li> <a href="./c.png" onclick="showpic(this);return false;" title="blue cat">another cat</a></li>
</ul>
<p id="description">some description here</p>
<img src="./69286415_p4_master1200.jpg" alt="my image" id="placeholder">
<script>

function showpic(pic) {
  var source=pic.getAttribute("href");
  var placeholder=document.getElementById("placeholder");
  placeholder.setAttribute("src",source);
  var text=pic.getAttribute("title");
  var description=document.getElementById("description");
  description.firstChild.nodeValue=text;

}
function countBodyChildren() {
  var body_Element=document.getElementsByTagName("body")[0];
  alert(body_Element.childNodes.length);
}

</script>
</body>
</html>
body {
    color: #333;
    background-color: #ccc;
}
#description{
    font-size: 40px;
}

用firstChild lastChild 可以省去一些麻烦的操作

p标签的nodeValue是null,p标签的内容在firstChild的nodeValue里

发表评论

电子邮件地址不会被公开。 必填项已用*标注