javascript的一些小知识2

一时失言乱红尘 2022-08-03 12:41 11阅读 0赞

# 在无序列表末尾添加节点 #

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

<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失去焦点（鼠标点击外部）