DOM（文档对象模型）

文档D

对象O

模型M

对象“O”

1、用户定义对象

2、内建对象

3、宿主对象

节点

DOM的原子是元素节点（element node）

属性节点

css

DOM并不是与网页结构打交道的唯一技术。我们还可以通过CSS告诉浏览器应该如何显示一份文档内容。

可以通过class属性选择一个元素

<p class="special">This paragraph has the special class</p>
<h2 class="special">So does this headline</h2>

css代码这么写就可以将class为“special”元素同意设置属性

.special{
    fonnt-style: italic;
}

还可以通过标签.classname

h2.special{
text-transform: uppercase;
}

ID 属性

<ul id="purchases">

#purchases{
    border: 1px solid white;
    background-color: #333;
    color: #ccc;
    padding: 1em;
}

可以通过ID为其内部元素定义样式

#purchases li {
    font-weight: bold;
}

获取元素

1、getElementByid（获取元素节点ID）

document.getElementById("idname");

获取和设置属性

1、getAttribute

getAttribute是一个函数。参数是属性名称获取属性值

2、getElementsByTagName

getElementsByTagName函数获取文档中name是参数的所有元素，可以用数组方式调用

3、getElementsByClassName

getElementsByClassName用于获取文档中class是参数的所有元素，可以用数组方式调用

4、setAttribute

setAttribute函数有两个参数，分别是属性和值，用于修改对应属性的值

例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/jscript" src="js/2019_9_13.js"></script>
    </head>
    <body>
        <p id="p1">p1修改前</p>
        <p id="p2"><font color="firebrick">p2修改前</font></p>
        <p id="p3"><font color="magenta">p3修改前</font></p>
        <p id="p4"><font color="blue">p4修改前</font></p>
        <input type="button" value = "click" onclick="fun1()" />
    </body>
</html>

function fun1(){
    //获取标签名为“p”的所有元素放入组合a
    var a = document.getElementsByTagName("p");
    //将该组合中的第三个修改为双引号中的内容
    a[2].innerHTML = "<P><font color='chartreuse'>修改后</font></p>";
    //获取标签名为“font”的所有元素放入组合b
    var b = document.getElementsByTagName("font");
    //输出整个文档能够检测的“font”标签的个数
    console.log(b.length);
    //设置b组合中第二个标签颜色属性修改为red
    b[1].setAttribute("color","red")
    
}

来源：https://www.cnblogs.com/hwx1999/p/11518088.html

标签

js代码

font

JS笔记02