javascript的一些小知识2

最新推荐文章于 2022-11-23 17:32:46 发布

团子ing

最新推荐文章于 2022-11-23 17:32:46 发布

阅读量363

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/yeyinglingfeng/article/details/47314743

版权

javascript 专栏收录该内容

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

团子ing

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录