JavaScript:dom心得

一、什么是 HTML DOM?

HTML DOM 是:

  • HTML 的标准对象模型
  • HTML 的标准编程接口
  • W3C 标准

HTML DOM 定义了所有 HTML 元素的对象属性,以及访问它们的方法

换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

二、 HTML DOM 节点


因此:通过 HTML DOM,树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素(节点)均可被修改,也可以创建或删除节点。




正常的JavaScript的写法有如下三种:

1、这种方法使用于js不是很多得情况下使用,否则代码不好看,不好调试

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	<!-- HTML 代码和 JS 代码耦合在一起. -->
	<button onclick="alert('helloworld...');">ClickMe</button>
	
</body>
</html>
2、由于html文档是从上到下编译的,所以如果把JavaScript放在head里面的话,可能执行时获取不到html里的对象属性

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

</head>
<body>
	
	<button>ClickMe</button>
	
</body>
</html>

<!-- 
	在整个 HTML 文档被加载后, 获取其中的节点. 
	把  script 节点放在 html 文档的最后 
	但不符合些 JS 代码的习惯. 
-->
<script type="text/javascript">
	
	//1. 获取 button
	var btns = document.getElementsByTagName("button");
	alert(btns.length);
	
	//2. 为 button 添加 onclick 响应函数
	btns[0].onclick = function(){
		alert("helloworld!!");
	}

</script>

例如:

<!DOCTYPE html>
<html>
<body>


<p id="intro">Hello World!</p>
<p>本例演示 <b>getElementById</b> 方法!</p>

<script>
x=document.getElementById("intro");
document.write("<p>来自 intro 段落的文本:" + x.innerHTML + "</p>");
</script>
</body>
</html>
结果为:

如果是这样的:

<!DOCTYPE html>
<html>
<body>
<script>
x=document.getElementById("intro");
document.write("<p>来自 intro 段落的文本:" + x.innerHTML + "</p>");
</script>

<p id="intro">Hello World!</p>
<p>本例演示 <b>getElementById</b> 方法!</p>


</body>
</html>
结果是:



3、

由于html文本在加载的时候会先调用window.onload=function(){}方法,所以一般推荐的JavaScript的写法是放在这个方法函数里面执行,如下操作:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//window.onload 事件在整个 HTML 文档被完全加载后出发执行. 
	//所以在其中可以获取到 HTML 文档的任何元素. 
	window.onload = function(){
		//方法写在这里面
	}
</script>
</head>
<body>
	
	<button>ClickMe</button>
	
</body>
</html>

访问HTML元素(节点)的三种方法:

  • 通过使用 getElementById() 方法
如:
<p id="intro">Hello World!</p>

<script>
x=document.getElementById("intro");
document.write("<p>来自 intro 段落的文本:" + x.innerHTML + "</p>");
</script>

  • 通过使用 getElementsByTagName() 方法,其返回的是集合对象,所以你可以利用根据标签名获取指定节点名字的数组,数组对象length属性是可以获取数组的长度。
<p>Hello World!</p>
<p>DOM 很有用!</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>

<script>
x=document.getElementsByTagName("p");
document.write("第一段的文本: " + x[0].innerHTML);
</script>
这个属性还有个好处是:可以在跟getElementById() 结合使用,先通过getElementById() 获取指定id对象,然后在这个id对象里进行获取指定标签名的所有元素

<p>Hello World!</p>

<div id="main">
<p>DOM 很有用!</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>

<script>
x=document.getElementById("main").getElementsByTagName("p");
document.write("div 中的第一段的文本: " + x[0].innerHTML);
</script>

  • 通过使用 getElementsByClassName() 方法      注释:  getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。
例如:document.getElementsByClassName("intro");

读写属性节点:通过元素节点的方式获取属性值和设置属性值

属性节点即为某一个指定的元素节点的属性
//1. 先获取指定的那个元素节点 var nameNode = document.getElementById("name");
//2. 再读取指定属性的值 alert(nameNode.value);
//3. 设置指定的属性的值. nameNode.value = "dom";

获取元素节点的子节点

1、childNodes 属性获取全部的子节点,但该方法不实用,因为如果要获取指定的节点的指定子节点的集合,可以直接调用元素节点的getElementsByTagName()方法获取
2、firstChild属性获取第一个子节点
3、lastChild属性获取最后一个子节点

//3. 获取 #city 节点的所有 li 子节点. var cityLiNodes = cityNode.getElementsByTagName("li");
alert(cityLiNodes.length);

//4. 获取指定节点的第一个子节点和最后一个子节点. alert(cityNode.firstChild);
alert(cityNode.lastChild);


节点的类型:元素节点,属性节点,文本节点
//通常情况下,操作属性节点直接通过“元素节点.属性名”的方式来读写属性值
 //关于节点的属性: nodeType, nodeName, nodeValue
 //在文档中, 任何一个节点都有这 3 个属性
 //而 id, name, value 是具体节点的属性. 

//1. 元素节点的这 3 个属性
var bjNode = document.getElementById("bj");
alert(bjNode.nodeType); //元素节点: 1
alert(bjNode.nodeName); //节点名: li
alert(bjNode.nodeValue); //元素节点没有 nodeValue 属性值: null

//2. 属性节点
var nameAttr = document.getElementById("name")
                      .getAttributeNode("name");
alert(nameAttr.nodeType); //属性节点: 2
alert(nameAttr.nodeName); //属性节点的节点名: 属性名
alert(nameAttr.nodeValue); //属性节点的 nodeValue 属性值: 属性值

//3. 文本节点:
var textNode = bjNode.firstChild;
alert(textNode.nodeType); //文本节点: 0
alert(textNode.nodeName); //节点名: #text
alert(textNode.nodeValue); //文本节点的 nodeValue 属性值: 文本值本身. 

//nodeType、nodeName 是只读的.
//而 nodeValue 是可以被改变的。 
//以上三个属性, 只有在文本节点中使用 nodeValue 读写文本值时使用最多. 

例如:

<ul id="city">
			<li id="bj" name="BeiJing">北京</li>
			<li>上海</li>
			<li>东京</li>
			<li>首尔</li>
		</ul>
		
		<br><br>
		<p>你喜欢哪款单机游戏?</p>
		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>
		
		<br><br>
		name: <input type="text" name="username" 
			id="name" value="atguigu"/>

属性节点:

一般情况下不单独获取属性节点,而是通过元素节点,属性名的方式来读写属性值


综上所述:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">

        //需求: 点击 submit 按钮时, 检查是否选择 type, 若没有选择给出提示: "请选择类型";
        //     检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: "请输入内容";
        //若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点

        //需求2: 使包括新增的 li 都能响应 onclick 事件: 弹出 li 的文本值.


        window.onload = function(){

            function ShowNodes(liNode){
                alert("^_^#" + liNode.firstChild.nodeValue);
            }
            var liNodes = document.getElementsByTagName("li");
            for(var i = 0;i<liNodes.length;i++){
                liNodes[i].onclick = function(){
                    ShowNodes(this);
                }
            }
            //1. 获取 #submit 对应的按钮 submitBtn
            var submit = document.getElementById("submit");

            //2. 为 submitBtn 添加 onclick 响应函数
            submit.onclick = function(){

                //4. 检查是否选择 type, 若没有选择给出提示: "请选择类型"
                //4.1 选择所有的 name="type" 的节点 types
                var types = document.getElementsByName("type");

                //4.2 遍历 types, 检查其是否有一个 type 的 checked 属性存在, 就可说明
                //有一个 type 被选中了: 通过  if(元素节点.属性名) 来判断某一个元素节点是否有
                //该属性.
                var typeVal = null;

                for(var i = 0; i < types.length; i++){
                    if(types[i].checked){
                        typeVal = types[i].value;

                        break;
                    }
                }

                //4.3 若没有任何一个 type 被选中, 则弹出: "请选择类型". 响应方法结束:
                //return false
                if(typeVal == null){
                    alert("请选择类型");
                    return false;
                }

                //5. 获取 name="name" 的文本值: 通过 value 属性: nameVal
                var nameEle = document.getElementsByName("name")[0];
                var nameVal = nameEle.value;

                //6. 去除 nameVal 的前后空格.
                var reg = /^\s*|\s*$/g;
                nameVal = nameVal.replace(reg,"");

                //使 name 的文本框也去除前后空格.
                nameEle.value = nameVal;
                //6. 把 nameVal 和 "" 进行比较, 若是 "" 说明只出入了空格, 弹出 "请输入内容"
                //方法结束: return false
                if(nameVal == ""){
                    alert("请输入内容");
                    return false;
                }
                //7. 创建 li 节点
                var liNode = document.createElement("li");
                //8. 利用 nameVal 创建文本节点
                var content = document.createTextNode(nameVal);

                //9. 把 8 加为 7 的子节点
                liNode.appendChild(content);

                //11. 为新创建的 li 添加 onclick 响应函数
                liNode.onclick = function(){
                    ShowNodes(this);
                }
                //10. 把 7 加为选择的 type 对应的 ul 的子节点
                document.getElementById(typeVal).appendChild(liNode);

                //3. 在 onclick 响应函数的结尾处添加 return false, 就可以取消提交按钮的
                //默认行为.
                return false;
            }
        }

    </script>
</head>
<body>

<p>城市?</p>

<ul id="city">
    <li id="bj">北京</li>
    <li>上海</li>
    <li>东京</li>
    <li>首尔</li>
</ul>

<br><br>
<p>游戏?</p>
<ul id="game">
    <li id="rl">红警</li>
    <li>实况</li>
    <li>极品飞车</li>
    <li>魔兽</li>
</ul>

<br><br>

<form action="demo1.html" name="form">

    <input type="radio" name="type" value="city">城市
    <input type="radio" name="type" value="game">游戏

     <input type="text" name="name"/>

    <input type="submit" value="Submit" id="submit"/>

</form>

</body>
</html>
















你可能感兴趣的:(JavaScript:dom心得)