Head first javascript（六）-白红宇

Head first javascript（六）

阅读量：5754 次

发布时间：2019-06-18

本文共 1534 字，大约阅读时间需要 5 分钟。

访问页面元素

访问页面元素通常的一个做法是给标签加上一个id，然后可以通过getElementById()函数来实现，如：


    
     ...
    
var sceneDescription = document.getElementById("scenetext")

还有一种方法是通过标签的名字来进行访问，getElementsByTagName()函数可以得到这个标签的所有页面元素，以数组的形式存储，按照在页面出现的先后顺序，如：

//两种访问方式相同document.getElementById("milk")document.getElementsByTagName("img")[2]

innerHTML

通过getElementById()可以得到某一个id的对象，要进一步得到标签里面的文本内容则可以通过innerHTML属性，也可以对内容进行修改，如：

document.getElementById("cake").innerHTML = "so good!";

DOM: document object model

网页的结构可以说是由一些结点(node)组成的，这些结点就是大大小小的标签，包括最外面的<html>到<head><body>等，再到里面的<div>这些。假设<html>为根结点，如果某个标签是嵌套在另一个标签里面的，那么在这棵结点树中这个标签就是另一个标签的后代。处在第一层的是document，然后到<html>，然后是各种嵌套的元素。每个元素有2个属性text和attribute，text是文本内容，是树中该元素的子结点，attribute是标签的一些属性.

每个结点都有一些可以帮助遍历这棵树的属性，包括

nodeValue : 只是text或者attribute结点有

nodeType : document或者text,用数字表示

childNodes : 所有子结点的一个数组

firstChild

lastChild

通过结点的方式修改text的内容

可以分为三步来完成：

移除该结点的所有子结点

用需要替换的新文本text创建一个新的结点

将新的节点加到原来的结点中成为它的子结点

如：

var node = document.getElementById("story");while(node.firstChild)    node.removeChild(node.firstChild);node.appendChild(document.createTextNode("new text");//其实作用相当与一句document.getElementById("story").innerHTML = "new text";

CSS 和 DOM

class是CSS组织渲染对象的一种方式，可以给"decision"这个类一些style

node对象里面的className属性可以访问到该结点的类class，也能够进行修改，如：

document.getElementById("decision1").className = "decisioninverse";

隐藏页面的某个对象

可以修改style里面的visibility属性，如：

document.getElementById("...").style.visibility = "visible";document.getElementById("...").style.visibility = "hidden";

转载于:https://www.cnblogs.com/jolin123/p/3946895.html

你可能感兴趣的文章