javascript的一些小知识2

来源：互联网发布：拖欠淘宝贷款一年编辑：程序博客网时间：2024/06/05 18:59

在无序列表末尾添加节点

实现效果：
在页面上显示一个无序列表
在列表下方有一个按钮，通过点击按钮，使得无序列表的表项增加
实现代码

<html>    <head>        <title>            hello world        </title>    </head>    <body>        <ul id="zz">            <li>hello 1</li>            <li>hello 2</li>            <li>hello 3</li>            <li>hello 4</li>        </ul>        <br>        <input type="button" value="add" onclick="add1();">        <script type="text/javascript">        var n=4;        function add1()        {            n++;            var z=document.getElementById("zz");            var li1=document.createElement("li");            var text1=document.createTextNode("hello "+n);            li1.appendChild(text1);            z.appendChild(li1);        }    </script>    </body></html>

重点项：
1.var z=document.getElementById(“zz”);
通过getElementById函数获得id属性为zz的ul对象。

2.var li1=document.createElement(“li”);
通过createElement函数创建一个li类型的对象并赋值给li1变量。

3.var text1=document.createTextNode(“hello “+n);
通过createTextNode函数创建一个文本节点对象，文本内容为hello+n
,并赋值给text1变量。

4.li1.appendChild(text1);
通过appendChild函数将text1加入到li1中，下面的那行代码意义与这个一样。

element对象

1.设置，获取和删除一个标签的属性值
首先获取标签对象
var x=document.getElementByid(“标签的id属性值”);
x.setAttribute(“属性名”,”设置的值”);
x.getAttribute(“属性名”);
x.removeAttribute(“属性名”);(不能删除value属性)

例如

<input type="text" value="hello" id="hello"/><script>var x=document.getElementByid("hello");alert(x.getAttribute("value"));x.setAttribute("value","world");alert(x.getAttribute("value"));<!--另一种访问方式(比较常用)-->alert(x.value);</script>

2.获取一个标签下的子标签
1.使用属性childNodes 浏览器兼容性差
2.使用getElementsByTagName方法，唯一有效的方式
示例

<ul id="ul1">    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li></ul><script>    var x=document.getElementById("ul1");    var list1=x.childNodes;    alert(list1.length);<!--在不同的浏览器中可能会出现不同的值-->    var list2=x.getElementByTagName("li");    alert(list2.length);<!--唯一有效的访问子标签的方法--></script>

Node对象

属性
nodeType
nodeName
nodeValue
示例

<html>    <head>        <title>            hello world        </title>    </head>    <body>        <span id="hello">hello world</span>        <script type="text/javascript">            var z=document.getElementById("hello");            //.......            alert(z.nodeType);// 1            alert(z.nodeName);// SPAN            alert(z.nodeValue);//null            //.......            var x=z.getAttributeNode("id");            alert(x.nodeType);// 2            alert(x.nodeName);// id            alert(x.nodeValue);//hello                      //.......            var y=z.firstChild;            alert(y.nodeType);// 3            alert(y.nodeName);// #text            alert(y.nodeValue);//hello world                </script>    </body></html>

父节点，子节点，同辈节点
parentNode父节点
childNode子节点
fistChild第一个子节点
lastChild最后一个子节点
nextSibling下一个节点
previousSibling 上一个节点

操作dom树
appendchild
添加子节点到末尾
特点：类似于剪切黏贴的效果

insertBefore(newNode,oldNode)
在oldNode节点前插入newNode节点

removeChild
删除子节点

replaceChild(newNode,oldNode)
替换子节点

cloneNode(true);
复制内容使用方法

<ul id="ul1">    <li>...</li></ul><div id="div1"></div>var ul1=document.getElementById("ul1");var x=ul1.cloneNode(true);var div1=document.getElementById("div1");div1.apendChild(x);

把无序列表的内容复制到了div中

innerHTML属性

作用：
1.获取文本内容
2.向标签里面设置内容（可以是html代码）

<span id="xxx">hello world</span><script type="text/javascript">    var x=document.ElementById("xxx");    alert(x.innerHTML);</script>

<div id="xxx"></div><script type="text/javascript">    var x=document.ElementById("xxx");    x.innerHTML="<h1>hello world</h1>"</script>

使用JS提交form表单

代码

<html>    <head>        <title>            hello world        </title>    </head>    <body>        <form id="form1">            <input type="text" name="name"/>            <input type="button" onclick="data1();" value="sure"/>        </form>        </div>        <script type="text/javascript">            function data1()            {                var form1=document.getElementById("form1");                form1.action="4-1.html";                form1.submit();            }    </script>    </body></html>

超链接方式

<a herf="目标网页?name属性值=要传输的值">点击传递信息</a>

事件

onclick()点击事件
onchange()改变内容事件（select）
onfocus得到焦点（鼠标点击）
onblur失去焦点（鼠标点击外部）

0 0