当前位置：首页 > news >正文

成都官网优化多少钱成都抖音seo

news 2025/7/22 11:18:27

成都官网优化多少钱,成都抖音seo,wordpress折叠目录,网站建设项目立项登记表1、DOM概念 DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model） 当网页被加载时，浏览器将网页转为一个DOM，并用JS进行各种操作。比如：改变页面中的HTML 元素及其属性&#x…

1、DOM概念

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）
当网页被加载时，浏览器将网页转为一个DOM，并用JS进行各种操作。比如：改变页面中的HTML 元素及其属性，改变页面中的CSS 样式，对页面中的事件做出响应。

DOM操作就是为了用JS程序代替人工直接修改HTML和CSS代码。

掌握基本的概念和函数即可，后面会用JS库或者框架来简化操作，直接用原生JS来实现动态网页的机会不多，比如：jQuery和Vue

2、DOM Tree树状结构

浏览器会根据 DOM 模型，将结构化文档HTML解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）

最常用的节点类型：

（1）文档节点 document Nodes

表示整个文档，是DOM操作的起点

（2）元素节点 elemen Nodes

表示HTML元素，例如<div>等

（3）属性节点 attribute Nodes

表示HTML 元素的属性

（4）文本节点 text Nodes

表示HTML 元素内的文本

节点间的关系：

节点具有父子关系和同级关系等。除了根元素没有父节点，其他元素都有父节点，一个父节点可以有多个子节点

3、DOM操作

（1）获取已有的节点

1.getElementsByTagName ()

通过搜索 HTML 标签名来获取节点，返回符合条件的元素。它的返回值是一个类似数组的对象

若有多个相同标签，返回含有多个节点的类数组对象

eg：

<body>

        <p class="pp">我是段落1</p>

        <p class="pp">我是段落2</p>

        <p class="pp" id="p3">我是段落3</p>

        <script>

const p1 = document.getElementsByTagName("p");

console.log(p1);

console.log(p1[0]);//输出p标签的第一个

console.log(p1[1]);//输出p标签的第二个

        </script>

</body>

2.getElementsByClassName（）

通过class名来获取节点，返回一个类似数组的对象，包括了所有 class 名字符合指定条件的元素。

若有多个相同class，返回含有多个节点的类数组对象

eg：

<body>

        <p class="pp">我是段落1</p>

        <p class="pp">我是段落2</p>

        <p class="pp" id="p3">我是段落3</p>

        <script>

const p2 = document.getElementsByClassName("pp");

console.log(p2);

        </script>

</body>

3.getElementById（）

通过id名来获取节点，直接返回匹配指定 id 属性的元素节点（而不是类似数组的对象）

eg：

<body>

        <p class="pp">我是段落1</p>

        <p class="pp">我是段落2</p>

        <p class="pp" id="p3">我是段落3</p>

        <script>

const p3 = document.getElementById("p3");

console.log(p3);

        </script>

</body>

4.querySelectorAll（）

与 querySelector 用法类似，区别是返回一个NodeList 对象，包含所有匹配给定选择器的节点

通过CSS选择器获取节点，返回NodeList对象（包含所有匹配给定选择器的节点）

eg：

<body>

        <p class="pp">我是段落1</p>

        <p class="pp">我是段落2</p>

        <p class="pp" id="p3">我是段落3</p>

        <script>

const p4 = document.querySelectorAll(".pp");

console.log(p4);

        </script>

</body>

5. querySelector（）

接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。

通过CSS选择器获取节点，返回第一个匹配上的节点

eg：

<body>

        <p class="pp">我是段落1</p>

        <p class="pp">我是段落2</p>

        <p class="pp" id="p3">我是段落3</p>

        <script>

        const p5 = document.querySelector(".pp");

console.log(p5);

        </script>

</body>

（2）属性的查看与修改

1.id 属性

来读写当前元素节点的 id 名。

eg：

<body>

<p class="pp">我是段落1</p>

<p class="pp">我是段落2</p>

<p class="pp" id="p3">我是段落3</p>

<script>

const p = document.getElementById("p3");

console.log(p);

console.log(p.id);

p.id = "_p_3";

console.log(p.id);

</script>

</body>

以上代码获取id属性后修改id名为 _p_3

2.className 属性

用来读写当前元素节点的 class 名，与id属性使用方法类似

eg：

<body>

<p class="pp">我是段落1</p>

<p class="pp">我是段落2</p>

<p class="pp" id="p3">我是段落3</p>

<script>

const p = document.getElementById("p3");

console.log(p);

console.log(p.className);

p.className = "pp jj yy xx";

console.log(p.className);

</script>

</body>

以上代码获取class属性后修改class 名为pp jj yy xx

3.classList 属性

是一个对象

有下列方法：

add() ：增加一个 class 名。

eg：

p4.classList.add("zz");

remove() ：移除一个 class 名。

eg：

p4.classList.remove("xx");

contains() ：检查当前元素是否包含某个 class 名，返回布尔值。

eg：

console.log(p4.classList.contains("jj"));

4.innerHTML

返回一个字符串，等同于该元素包含的所有HTML代码。

该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括 <HTML> 和 <body> 元素。

eg：

<body>

        <img src="../xg.png" alt="图片加载失败" id="img1">；

        <script>

        const i = document.getElementById("img1");

        i.src = "../th.jpg";

        console.log("照片:"+ i.src);

        </script>

</body>

修改前：

修改后：

5.innerText

和innerHTML类似，不同的是innerText无法识别元素，会直接渲染成字符串。

（3）新节点的创建

1.createElement （）

用来生成标签节点，并返回该节点。

eg：

var p4 = document.createElement("p");

2.createTextNode（）

用来生成文本节点，并返回该节点，它的参数是文本节点的内容。

eg：

var t4 = document.createTextNode("我是段落5");

3. createAttribute （）

生成一个新的属性节点，并返回该节点。可通过该节点的value属性，对其赋值。

var a4 = document.createAttribute("class"); // 创建属性节点

a4.value = "fruit"; // 为属性节点赋值

（4）新节点的插入

1. appendChild （）

为标签节点增加子节点

eg：

p4.appendChild(t4);

将文本节点作为子节点，加入新建的<p>标签节点下面

2. setAttributeNode（）

为标签节点插入属性节点，比如name，class，id, style等，若此属性节点已经设置到别的元素节点，则控制台会报错。

eg：

p4.setAttributeNode(a4);

将属性节点插入新建的<p>标签节点

3.插入<bady>标签中

最后不要忘了将已经配置号的<p>标签节点，作为子节点，插入body节点中

eg：

const body_node = document.getElementsByTagName("body")[0];

body_node.appendChild(p4);

4、定时器函数

（1）setInterval 函数

指定某个任务每隔一段时间就执行一次（无限次的定时执行）

语法格式：

setInterval(函数名, 时长（单位为ms）);

eg：

<body>

<script>

function func1(){

console.log("定时任务: 喝水！");

}

setInterval(func, 1000);

</script>

</body>

每隔1000ms执行一次定时任务（无限重复）

（2）setTimeout 函数

用来指定某个函数在多少毫秒之后执行(仅执行一次)

它返回一个整数表示定时器的编号，如果突然想撤销这个定时任务，可以用这个编号取消。若要定时执行多次，只需多次调用setTimeout 即可。

语法格式：

<body>

<script>

function func1(){

console.log("起床啦！");

}

const time_id = setTimeout(func2, 5000);

clearTimeout(time_id); // 临时通知该定时器取消任务

</script>

</body>

5秒以后（仅仅）执行一次定时任务！返回的是该定时器唯一编码，可利用该编码临时取消任务

5、 CSS样式操作

（1）方法一

直接独立修改节点style下面的各种属性
ps：

属性名与CSS键名有区别，主要是小写变大写

eg：

<body>

<div class="box" id="div1">利用js修改CSS样式</div>

<script>

e.style.backgroundColor = "pink";

e.style.color = "white";

e.style.fontSize = "30px";

</script>

</body>

运行后：

（2）方法二

修改节点的CSS代码（通过反引号实现）

eg：

<body>

<div class="box" id="div1">利用js修改CSS样式</div>

<script>

e.style.cssText =

`

background-color: gray;

color:pink;

font-size: 50px;

`;

</script>

</body>