5个常用的dom方法：getElementById getElementByTagName getElementByClassName getAttribute setAttribute
dom:当创建了一个网页并把它加载到web浏览器中 dom就产生了它把你编写的网页文档转换为一个文档对象。
document object model
把一个文档的各种元素想象成一颗家谱树，就可以用同样的术语描述dom，不过与使用家谱树相比，文档称为节点树更准确
元素节点：element node
文本节点：如果一份文档完全由一些空白元素构成，它将由一个结构，但这份文档本身不会包含什么内容。在内容为王的互联网上，绝大多数的内容是由文本提供的。
文本节点被包含在元素节点内部
属性节点：属性节点用来对元素做出更具体的描述。例如几乎所有元素都有个title属性
如：<p title=“a gentle reminder”>Don’t forget to buy this stuff. </p>
其中 title=“a gentle reminder”是个属性节点。
属性总是被放在起始标签里，所以属性节点总是包含在元素节点中，并非所有的元素都包含属性但所有的属性都被元素包含。
如 id属性 class属性
CSS 层叠样式表
对样式的声明可以嵌入在文档的head部分 style标签之间，也可以放在另外一个样式表文件里。css声明元素样式的语法和javascript函数的定义语法很相似
继承是css技术中一项强大功能。css能把文档内容作为一课节点树，节点树上各个元素将继承其父元素的样式属性。例如当我们为body元素定义了一些颜色或字体，它们将不仅作用于那些直接包含在<body>标签里的内容还将作用于嵌套在body元素内部的所有元素。
所以如果只是想控制某个特定元素而不是所有此元素，就需要借助于id或者class
class 在css里用.表示
id 在css里用＃表示
<p class＝”special”>This paragraph has special class </p>
<h2 class = “special”> So does this headline </h2>
.special{
font-style:italic;
}
或者h2 .special{
text-transform:uupercase;
}
这种是为一种特定类型的元素定义一种样式
id本身只能用一次，而class可以各种用。但css还是可以利用id属性为包含在该特定元素里的其他元素定义样式
<ul id=“purchase”>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
#purchases{
}
#purchases li{
}
DOM提供的5个方法：
获取元素：
- 通过id获取某个元素：document.getElementById(“purchase”)得到的是一个object可以用typeof打印出来类型看看。事实上，文档中每个元素都是一个对象。
- 通过tagName获取某类元素：document.getElementsByTagName(“li”)这里看下是elements而不是elemet。这种调用将返回一个对象数组。所以可以拿其length，可以查看其列表项元素个数。getElementsByTagName允许把通配符*作为其参数：document.getElementById(“*”)这样得到的就是文档中所有元素：可以先用var shopping = document.getElementById(“purchase”) 得到ul那个对象,再var items =shopping.getElementsByTagName(“*”)
- 通过class属性中的类名来获取元素。getElementsByClassName也是得到数组。参数可以是多个类名只需要空格表示如：document.getElementsByClassName(“important sale”)就算元素有更多的类 或者顺序和此不同都可以拿得到
- 获取属性
getAttribute:获取属性
getAttribute方法不属于document对象，只能通过元素节点对象来调用。例如：
var paras = document.getElementsByTagName(“p”);
for(var i =0; i<paras.length;i++){
var title_text = paras[i].getAttribute(“title”);
if(title_text) alert(title_text);
}
如果有的p元素没有设置title属性，则会得到null
- 设置属性 ：
setAttribute:设置属性
var shopping = document.getElementById(“purchase”);
shopping.setAttribute(“title”,”a list of goods”);//如果本身无title属性此句会先创建title属性再设置其值
扫一扫
2620
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
