百度前端学院第19天作业

这是别人的,转载自https://www.jianshu.com/p/40b9c20ce34a

一、HTML DOM (文档对象模型)


当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

HTML DOM 模型被构造为对象的树。


HTML代码:


<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Simple DOM example</title>
</head>

<body>
<section>
<img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
<p>Here we will add a link to the
<a href="https://www.mozilla.org/">Mozilla homepage</a>
</p>
</section>
</body>

</html>


DOM结构:






image.png


这里你可以看到,文档中每个元素和文本在树中都有它们自己的入口 — 称之为节点。你将用不同的术语来描述节点的类型和它们相对于其他节点的位置:



  • 元素节点: 一个元素,存在于DOM中。


  • 根节点: 树中顶层节点,在HTML的情况下,总是一个HTML节点(其他标记词汇,如SVG和定制XML将有不同的根元素)。


  • 子节点: 直接位于另一个节点内的节点。例如上面例子中,IMG是SECTION的子节点。


  • 后代节点: 位于另一个节点内任意位置的节点。例如 上面例子中,IMG是SECTION的子节点,也是一个后代节点。IMG不是BODY的子节点,因为它在树中低了BODY两级,但它是BODY的后代之一。


  • 父节点: 里面有另一个节点的节点。例如上面的例子中BODY是SECTION的父节点。


  • 兄弟节点: DOM树中位于同一等级的节点。例如上面例子中,IMG和P是兄弟。


  • 文本节点: 包含文字串的节点



二、操作DOM


1. 查找HTML元素


· 通过 id 找到 HTML 元素


var x=document.getElementById("intro");

· 通过标签名找到 HTML 元素


var x=document.getElementById("main");

var y=x.getElementsByTagName("p");


· 通过类名找到 HTML 元素


var x=document.getElementByClassName("contact");
// 提示:通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。

· 高级节点选择器(IE 9+)




  1. querySelector()

    文档对象模型(Document)引用的querySelector()方法返回文档中与指定选择器或选择器组匹配的第一个 html元素(Element)。 如果找不到匹配项,则返回null

    element = document.querySelector(selectors);

    selectors: 包含一个或多个要匹配的选择器的 DOM字符串DOMString。 该字符串必须是有效的CSS选择器字符串;


box= document.querySelector('#box');


  1. querySelectorAll()


querySelector()几乎完成一样,唯一的区别是:返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList(数组)。


2. 改变 HTML 输出流


document.write(Date());

提示:绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。


3. 改变 HTML 内容


document.getElementById("p1").innerHTML="New text!";

4. 改变 HTML 属性


document.getElementById("image").src="landscape.jpg";

5. 改变 HTML 样式


// 方法一 设置行内样式
document.getElementById("p2").style.color="blue";
// 方法二 将某个类赋值给DOM
para.setAttribute('class', 'highlight');


注意: CSS样式的JavaSript属性版本以小驼峰式命名法书写,而CSS版本带连接符号(backgroundColor 对 background-color)。确保你不会混淆,否则就不能工作。



三、HTML DOM 事件


1. 常用事件



  • 当用户点击鼠标时

    触发:onmousedown、onmouseup 以及 onclick 事件



onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。



<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

<h1 onclick="changetext(this)">请点击该文本</h1>

<div onmousedown="mDown(this)" onmouseup="mUp(this)">请点击这里</div>

<script>

document.getElementById("myBtn").onclick=function(){displayDate()};

</script>



  • 当网页已加载时


onload 和 onunload 事件会在用户进入或离开页面时被触发。



onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。onload 和 onunload 事件可用于处理 cookie。



<body onload="checkCookies()">

支持该事件的 HTML 标签:


<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>


支持该事件的 JavaScript 对象:


image, layer, window



  • 当鼠标移动到元素上时


<div onmouseover="mOver(this)" onmouseout="mOut(this)">把鼠标移到上面</div>


  • 当输入字段被改变时


<input type="text" id="fname" onchange="upperCase()">

2. 添加和删除节点(HTML 元素)


添加


<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>


删除


<div id="div1">

<p id="p1">这是一个段落。</p>

<p id="p2">这是另一个段落。</p>

</div>

<script>

// 方法1

var parent=document.getElementById("div1");

var child=document.getElementById("p1");

parent.removeChild(child);

// 方法2

var child=document.getElementById("p1");

child.parentNode.removeChild(child);

</script>


3. JS 判断类名


var p = document.getElementsByTagName('p');

for(var i = 0;i <p.length;i++){

  //第一种方法,用classList这个H5 API,有兼容性问题

  if(p[i].classList.contains('test')==true){
    console.log(p[i].innerHTML);
}

  //第二种方法,用className这个属性

  if(p[i].className=='test'){
    console.log(p[i].innerHTML)
}

  //第三种方法,用getAttribute()这个方法

  if(p[i].getAttribute("class")=='test'){
  console.log(p[i].innerHTML);
 }

}


posted @ 2019-10-21 21:40 sogeisetsu 阅读(...) 评论(...) 编辑 收藏